import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { InertiaPaginatorSlice } from '@/components/inertia-paginator-footer';

type Props = {
    paginator: InertiaPaginatorSlice;
    onPageChange: (page: number) => void;
    disabled?: boolean;
};

export function JsonPaginatorFooter({ paginator, onPageChange, disabled = false }: Props) {
    const { current_page, last_page, from, to, total } = paginator;

    if (last_page <= 1) {
        return null;
    }

    return (
        <div className="flex flex-col gap-3 border-t px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
            <p className="tabular-nums text-muted-foreground">
                {from != null && to != null ? (
                    <>
                        Mostrando{' '}
                        <span className="font-medium text-foreground">
                            {from}–{to}
                        </span>{' '}
                        de <span className="font-medium text-foreground">{total}</span>
                    </>
                ) : (
                    <>
                        Total: <span className="font-medium text-foreground">{total}</span>
                    </>
                )}
                <span aria-hidden className="mx-2 text-muted-foreground/70">
                    ·
                </span>
                Página{' '}
                <span className="font-medium text-foreground">
                    {current_page} / {last_page}
                </span>
            </p>
            <div className="flex items-center gap-2">
                <Button
                    className="gap-1"
                    disabled={disabled || current_page <= 1}
                    size="sm"
                    type="button"
                    variant="outline"
                    onClick={() => onPageChange(current_page - 1)}
                >
                    <ChevronLeft aria-hidden className="size-4" />
                    Anterior
                </Button>
                <Button
                    className="gap-1"
                    disabled={disabled || current_page >= last_page}
                    size="sm"
                    type="button"
                    variant="outline"
                    onClick={() => onPageChange(current_page + 1)}
                >
                    Siguiente
                    <ChevronRight aria-hidden className="size-4" />
                </Button>
            </div>
        </div>
    );
}