import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';

import { Button } from '@/shared/ui/button';
import {
  Pagination,
  PaginationContent,
  PaginationItem,
} from '@/shared/ui/pagination';

type PostTablePaginationProps = {
  page: number;
  pageCount: number;
  onPageChange: (page: number) => void;
};

export const PostTablePagination = ({
  page,
  pageCount,
  onPageChange,
}: PostTablePaginationProps) => {
  return (
    <Pagination>
      <PaginationContent className="gap-2">
        <PaginationItem>
          <Button
            variant="outline"
            size="sm"
            disabled={page <= 1}
            onClick={() => onPageChange(page - 1)}
          >
            <ChevronLeftIcon aria-hidden className="size-4" />
            이전
          </Button>
        </PaginationItem>
        <PaginationItem>
          <span
            className="px-2 text-sm text-muted-foreground tabular-nums"
            aria-live="polite"
          >
            {page} / {pageCount} 페이지
          </span>
        </PaginationItem>
        <PaginationItem>
          <Button
            variant="outline"
            size="sm"
            disabled={page >= pageCount}
            onClick={() => onPageChange(page + 1)}
          >
            다음
            <ChevronRightIcon aria-hidden className="size-4" />
          </Button>
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
};