import { ChevronLeft, ChevronRight } from 'lucide-react';

interface ListPaginationProps {
    page: number;
    totalPages: number;
    totalItems: number;
    pageSize: number;
    onPageChange: (page: number) => void;
}

export function ListPagination({
    page,
    totalPages,
    totalItems,
    pageSize,
    onPageChange,
}: ListPaginationProps) {
    if (totalItems === 0 || totalPages <= 1) {
        return null;
    }

    const start = (page - 1) * pageSize + 1;
    const end = Math.min(page * pageSize, totalItems);

    return (
        <div className="flex flex-wrap items-center justify-between gap-2 border-t border-slate-800/60 px-4 py-2.5">
            <p className="text-[10px] text-slate-500">
                Showing <span className="font-semibold text-slate-300">{start}–{end}</span> of{' '}
                <span className="font-semibold text-slate-300">{totalItems}</span>
            </p>
            <div className="flex items-center gap-1">
                <button
                    type="button"
                    disabled={page <= 1}
                    onClick={() => onPageChange(page - 1)}
                    className="inline-flex items-center gap-1 rounded-lg border border-slate-800 px-2.5 py-1.5 text-[10px] font-semibold text-slate-400 transition hover:bg-slate-800/40 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
                >
                    <ChevronLeft className="h-3.5 w-3.5" />
                    Prev
                </button>
                <span className="min-w-[4.5rem] text-center text-[10px] font-semibold text-slate-500">
                    {page} / {totalPages}
                </span>
                <button
                    type="button"
                    disabled={page >= totalPages}
                    onClick={() => onPageChange(page + 1)}
                    className="inline-flex items-center gap-1 rounded-lg border border-slate-800 px-2.5 py-1.5 text-[10px] font-semibold text-slate-400 transition hover:bg-slate-800/40 hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
                >
                    Next
                    <ChevronRight className="h-3.5 w-3.5" />
                </button>
            </div>
        </div>
    );
}