import { Link, usePage } from '@inertiajs/react';
import { BookOpenCheck, Building2, KeyRound, Sparkles, Globe, Mail, ShieldCheck, User, Webhook } from 'lucide-react';
import { cn } from '@/lib/utils';

const LINKS = [
    { href: '/settings/company', label: 'Company', icon: Building2 },
    { href: '/settings/emails', label: 'Emails', icon: Mail },
    { href: '/settings/domains', label: 'Domains', icon: Globe },
    { href: '/settings/quickbooks', label: 'QuickBooks', icon: BookOpenCheck },
    { href: '/settings/webhooks', label: 'Webhooks', icon: Webhook },
    { href: '/settings/api', label: 'API', icon: KeyRound },
    { href: '/settings/ai', label: 'AI improvements', icon: Sparkles },
    { href: '/settings/profile', label: 'My profile', icon: User },
    { href: '/settings/security', label: 'Security & 2FA', icon: ShieldCheck },
];

/** Sash-style tab strip in a card. */
export function SettingsNav() {
    const url = usePage().url;
    return (
        <nav className="mb-6 flex flex-wrap gap-1 rounded-[var(--radius-card)] bg-surface p-1.5 shadow-card" aria-label="Settings">
            {LINKS.map((l) => {
                const active = url.startsWith(l.href);
                const Icon = l.icon;
                return (
                    <Link key={l.href} href={l.href} aria-current={active ? 'page' : undefined}
                        className={cn('flex items-center gap-2 rounded-[5px] px-4 py-2 text-sm font-medium transition-colors duration-150',
                            active ? 'bg-accent-fill text-accent-ink' : 'text-ink hover:bg-accent-soft hover:text-link')}>
                        <Icon className="h-4 w-4" strokeWidth={1.75} aria-hidden />
                        {l.label}
                    </Link>
                );
            })}
        </nav>
    );
}