import { Link } from '@inertiajs/react';

import { cn } from '@/lib/utils';
import type { PaginationLink } from '@/types';

type PaginationLinksProps = {
    links: PaginationLink[];
};

function normalizeLabel(label: string): string {
    return label
        .replace('« Previous', 'Previous')
        .replace('Next »', 'Next')
        .replace('…', '...');
}

export function PaginationLinks({ links }: PaginationLinksProps) {
    return (
        <div className="flex flex-wrap items-center gap-2">
            {links.map((link) => (
                <Link
                    key={link.label + link.url}
                    href={link.url || '#'}
                    className={cn(
                        'rounded-md px-3 py-1.5 text-sm transition-colors',
                        link.active
                            ? 'bg-primary text-white'
                            : 'bg-card text-muted hover:bg-surface hover:text-main',
                        !link.url && 'pointer-events-none opacity-40',
                    )}
                    preserveScroll
                >
                    {normalizeLabel(link.label)}
                </Link>
            ))}
        </div>
    );
}