import { Link } from '@inertiajs/react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

/** Fragmento típico de `LengthAwarePaginator::toArray()` en respuestas Inertia. */
export type InertiaPaginatorSlice = Pick<
    {
        current_page: number;
        last_page: number;
        total: number;
        from: number | null;
        to: number | null;
        prev_page_url: string | null;
        next_page_url: string | null;
        data: unknown[];
    },
    | 'current_page'
    | 'last_page'
    | 'total'
    | 'from'
    | 'to'
    | 'prev_page_url'
    | 'next_page_url'
>;

export function InertiaPaginatorFooter({ paginator }: { paginator: InertiaPaginatorSlice }) {
    const {
        current_page,
        last_page,
        prev_page_url,
        next_page_url,
        from,
        to,
        total,
    } = paginator;

    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">
                {prev_page_url ? (
                    <Button asChild className="gap-1" size="sm" variant="outline">
                        <Link preserveScroll href={prev_page_url}>
                            <ChevronLeft aria-hidden className="size-4" />
                            Anterior
                        </Link>
                    </Button>
                ) : (
                    <Button className="gap-1" disabled size="sm" variant="outline">
                        <ChevronLeft aria-hidden className="size-4" />
                        Anterior
                    </Button>
                )}
                {next_page_url ? (
                    <Button asChild className="gap-1" size="sm" variant="outline">
                        <Link preserveScroll href={next_page_url}>
                            Siguiente
                            <ChevronRight aria-hidden className="size-4" />
                        </Link>
                    </Button>
                ) : (
                    <Button className="gap-1" disabled size="sm" variant="outline">
                        Siguiente
                        <ChevronRight aria-hidden className="size-4" />
                    </Button>
                )}
            </div>
        </div>
    );
}