import { ChevronLeftIcon, ChevronRightIcon } from "@/components/dashboard-icons";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  return (
    <div className="flex items-center justify-center gap-3 border-t border-border/70 px-5 pt-3 pb-[1px]">
      <button
        type="button"
        disabled={currentPage <= 1}
        onClick={() => onPageChange(currentPage - 1)}
        className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground transition hover:bg-accent disabled:opacity-30"
      >
        <ChevronLeftIcon className="h-4 w-4" />
      </button>

      <span className="flex h-8 min-w-8 items-center justify-center rounded-full bg-primary px-2 text-sm font-semibold text-primary-foreground">
        {currentPage}
      </span>

      <button
        type="button"
        disabled={currentPage >= totalPages}
        onClick={() => onPageChange(currentPage + 1)}
        className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-foreground transition hover:bg-accent disabled:opacity-30"
      >
        <ChevronRightIcon className="h-4 w-4" />
      </button>
    </div>
  );
}