import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination';
import { getPaginationItems } from '@/lib/pagination';

type ServerPaginationProps = {
    currentPage: number;
    lastPage: number;
    total: number;
    totalLabel: string;
    onPageChange: (page: number) => void;
};

export function ServerPagination({
    currentPage,
    lastPage,
    total,
    totalLabel,
    onPageChange,
}: ServerPaginationProps) {
    if (lastPage <= 1) {
        return null;
    }

    return (
        <div className="flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground">
            <span>
                {total} {totalLabel}
            </span>
            <Pagination className="w-auto">
                <PaginationContent>
                    <PaginationItem>
                        <PaginationPrevious
                            href="#"
                            aria-disabled={currentPage <= 1}
                            className={
                                currentPage <= 1
                                    ? 'pointer-events-none opacity-50'
                                    : undefined
                            }
                            onClick={(event) => {
                                event.preventDefault();

                                if (currentPage > 1) {
                                    onPageChange(currentPage - 1);
                                }
                            }}
                        />
                    </PaginationItem>

                    {getPaginationItems(currentPage, lastPage).map((item, index) =>
                        item === 'ellipsis' ? (
                            <PaginationItem key={`ellipsis-${index}`}>
                                <PaginationEllipsis />
                            </PaginationItem>
                        ) : (
                            <PaginationItem key={item}>
                                <PaginationLink
                                    href="#"
                                    isActive={item === currentPage}
                                    onClick={(event) => {
                                        event.preventDefault();
                                        onPageChange(item);
                                    }}
                                >
                                    {item}
                                </PaginationLink>
                            </PaginationItem>
                        ),
                    )}

                    <PaginationItem>
                        <PaginationNext
                            href="#"
                            aria-disabled={currentPage >= lastPage}
                            className={
                                currentPage >= lastPage
                                    ? 'pointer-events-none opacity-50'
                                    : undefined
                            }
                            onClick={(event) => {
                                event.preventDefault();

                                if (currentPage < lastPage) {
                                    onPageChange(currentPage + 1);
                                }
                            }}
                        />
                    </PaginationItem>
                </PaginationContent>
            </Pagination>
        </div>
    );
}