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

const TABS = [
    { label: 'Overview', href: '/portfolio' },
    { label: 'Retention', href: '/portfolio/retention' },
    { label: 'Tenants', href: '/portfolio/tenants' },
    { label: 'Vacancies', href: '/portfolio/vacancies' },
];

export function PortfolioTabs() {
    const { url } = usePage();
    const path = url.split('?')[0];

    return (
        <div className="mb-6 flex flex-wrap gap-2">
            {TABS.map((t) => {
                const active = path === t.href;
                return (
                    <Link key={t.href} href={t.href}
                        className={`rounded-lg px-4 py-2 text-sm font-medium transition ${
                            active ? 'bg-primary text-primary-foreground' : 'border border-border hover:bg-muted'
                        }`}>
                        {t.label}
                    </Link>
                );
            })}
        </div>
    );
}

export function LocationFilter({ options, value, onChange }: {
    options: { id: number; name: string }[];
    value: string | null;
    onChange: (v: string) => void;
}) {
    return (
        <select value={value ?? ''} onChange={(e) => onChange(e.target.value)}
            className="rounded-md border border-border bg-background px-3 py-1.5 text-sm">
            <option value="">All locations</option>
            {options.map((o) => <option key={o.id} value={o.name}>{o.name}</option>)}
        </select>
    );
}

export function money(v: number | null | undefined) {
    if (v === null || v === undefined) return '—';
    return '$' + v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}