import { ChevronLeft, ChevronRight } from "lucide-react";
import Button from "@/components/ui/Button";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

type Props = {
  page: number;
  totalPages: number;
  totalItems: number;
  pageSize: number;
  onPageChange: (page: number) => void;
};

export default function MenuBoardPagination({ page, totalPages, totalItems, pageSize, onPageChange }: Props) {
  const t = useMenuBoardText();
  if (totalPages <= 1) return null;

  const start = (page - 1) * pageSize + 1;
  const end = Math.min(page * pageSize, totalItems);

  return (
    <nav className="flex flex-col gap-3 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
      <p className="text-sm text-[var(--text-muted)]">
        {t("showing", { start, end, total: totalItems })}
      </p>
      <div className="flex items-center gap-2">
        <Button type="button" variant="secondary" size="sm" disabled={page === 1} onClick={() => onPageChange(page - 1)}>
          <ChevronLeft className="h-4 w-4" />
          {t("previous")}
        </Button>
        <span className="rounded-lg border border-[var(--border)] bg-[var(--bg)] px-3 py-1.5 text-xs font-medium text-[var(--text-muted)]">
          {t("pageOf", { page, total: totalPages })}
        </span>
        <Button type="button" variant="secondary" size="sm" disabled={page === totalPages} onClick={() => onPageChange(page + 1)}>
          {t("next")}
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>
    </nav>
  );
}