'use client';

import { useRouter } from 'next/navigation';
import { useTransition } from 'react';
import Pagination from '@/app/component/Pagination';

type Props = {
	total: number;
	page: number;
	perPage: number;
	// 이동 대상 경로 + 유지할 쿼리 (page 는 자동 갱신)
	basePath: string;
	query?: Record<string, string>;
};

// SSR 목록 페이지용 페이저 — 기존 Pagination(onChange 콜백형)을 router.push 로 연결.
// useTransition 으로 전환 중 현재 목록 유지(스켈레톤 플래시 없이) + 흐림 표시.
export default function Pager({ total, page, perPage, basePath, query }: Props) {
	const router = useRouter();
	const [isPending, startTransition] = useTransition();

	const handleChange = (next: number) => {
		const params = new URLSearchParams(query);
		params.set('page', String(next));
		startTransition(() => {
			router.push(`${basePath}?${params.toString()}`);
		});
	};

	return (
		<div className={isPending ? 'data-table--pending' : undefined}>
			<Pagination total={total} page={page} perPage={perPage} onChange={handleChange} />
		</div>
	);
}