'use client';

import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

type PaginatedListFooterProps = {
  page: number;
  limit: number;
  total: number;
  totalPages: number;
  itemLabel: string;
  onPageChange: (page: number) => void;
  onLimitChange?: (limit: number) => void;
  pageSizeOptions?: number[];
};

export function PaginatedListFooter({
  page,
  limit,
  total,
  totalPages,
  itemLabel,
  onPageChange,
  onLimitChange,
  pageSizeOptions = [],
}: PaginatedListFooterProps) {
  const start = total === 0 ? 0 : (page - 1) * limit + 1;
  const end = total === 0 ? 0 : Math.min(page * limit, total);
  const canChangeLimit = typeof onLimitChange === 'function' && pageSizeOptions.length > 0;
  const limitOptions = Array.from(new Set([limit, ...pageSizeOptions])).sort((a, b) => a - b);

  return (
    <div className="flex flex-col gap-3 rounded-xl border border-border bg-surface p-4 shadow-sm md:flex-row md:items-center md:justify-between">
      <div>
        <p className="text-sm font-semibold text-foreground">
          Mostrando {start}-{end} de {total} {itemLabel}
        </p>
        <p className="text-xs text-muted-foreground">
          Página {page} de {totalPages}
        </p>
      </div>

      <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
        {canChangeLimit ? (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <span>Ver</span>
            <Select value={String(limit)} onValueChange={(value) => onLimitChange?.(Number(value))}>
              <SelectTrigger className="h-9 w-[4.5rem]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {limitOptions.map((option) => (
                  <SelectItem key={option} value={String(option)}>
                    {option}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <span>por página</span>
          </div>
        ) : null}

        <div className="flex gap-2">
          <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>
            Anterior
          </Button>
          <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}>
            Siguiente
          </Button>
        </div>
      </div>
    </div>
  );
}