import { Link } from '@inertiajs/react';
import type { PaginatedData } from '@/types';

type Props = Pick<
    PaginatedData<unknown>,
    | 'current_page'
    | 'last_page'
    | 'from'
    | 'to'
    | 'total'
    | 'prev_page_url'
    | 'next_page_url'
>;

export function Pagination({
    current_page,
    last_page,
    from,
    to,
    total,
    prev_page_url,
    next_page_url,
}: Props) {
    if (last_page <= 1) {
        return null;
    }

    const buttonClasses =
        'inline-flex items-center rounded-md border border-border px-4 py-2 text-sm font-medium transition hover:bg-accent';

    const disabledClasses =
        'inline-flex cursor-not-allowed items-center rounded-md border border-border px-4 py-2 text-sm font-medium opacity-40';

    return (
        <div className="flex flex-col gap-4 border-t border-border pt-6 sm:flex-row sm:items-center sm:justify-between">
            <p className="text-sm text-muted-foreground">
                Mostrando {from ?? 0} a {to ?? 0} de {total} resultados
            </p>

            <div className="flex items-center gap-3">
                {prev_page_url ? (
                    <Link
                        href={prev_page_url}
                        preserveScroll
                        className={buttonClasses}
                    >
                        Anterior
                    </Link>
                ) : (
                    <span className={disabledClasses}>Anterior</span>
                )}

                <span className="text-sm text-muted-foreground">
                    Página {current_page} de {last_page}
                </span>

                {next_page_url ? (
                    <Link
                        href={next_page_url}
                        preserveScroll
                        className={buttonClasses}
                    >
                        Siguiente
                    </Link>
                ) : (
                    <span className={disabledClasses}>Siguiente</span>
                )}
            </div>
        </div>
    );
}