"use client";

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

import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";

interface DataTablePaginationProps {
  page: number;
  pageSize: number;
  pageCount: number;
  pageSizeOptions: number[];
  onPageChange: (page: number) => void;
  onPageSizeChange: (pageSize: number) => void;
  disabled?: boolean;
}

/**
 * DataTable footer: rows-per-page select + "Page x of y" + previous/next.
 * Prev/next chevrons flip in RTL via `rtl:rotate-180` (design RTL rule 2).
 */
function DataTablePagination({
  page,
  pageSize,
  pageCount,
  pageSizeOptions,
  onPageChange,
  onPageSizeChange,
  disabled = false,
}: DataTablePaginationProps) {
  const { t } = useTranslation();

  return (
    <div className="flex flex-col-reverse items-center justify-between gap-3 pt-3 sm:flex-row">
      <div className="flex items-center gap-2">
        <Typography as="span" variant="body" color="secondary">
          {t("dataTable.rowsPerPage")}
        </Typography>
        <Select
          value={String(pageSize)}
          onValueChange={(value) => onPageSizeChange(Number(value))}
          disabled={disabled}
        >
          <SelectTrigger size="sm" aria-label={t("dataTable.rowsPerPage")}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {pageSizeOptions.map((option) => (
              <SelectItem key={option} value={String(option)}>
                {option}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex items-center gap-2">
        <Typography as="span" variant="body" color="secondary">
          {t("dataTable.pageOf", { current: page, total: pageCount })}
        </Typography>
        <Button
          variant="secondary"
          size="icon-sm"
          aria-label={t("dataTable.previous")}
          disabled={disabled || page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          <ChevronLeftIcon className="rtl:rotate-180" />
        </Button>
        <Button
          variant="secondary"
          size="icon-sm"
          aria-label={t("dataTable.next")}
          disabled={disabled || page >= pageCount}
          onClick={() => onPageChange(page + 1)}
        >
          <ChevronRightIcon className="rtl:rotate-180" />
        </Button>
      </div>
    </div>
  );
}

export { DataTablePagination };