import { Link, usePage } from '@inertiajs/react';
import { Building2, Users } from 'lucide-react';
import { cn } from '@/lib/utils';

export function TenantAdminNav({ tenantId }: { tenantId: number }) {
    const { auth } = usePage().props;
    const base = `/administration/tenants/${tenantId}`;
    const allowed = (permission: string) =>
        auth.user.is_platform_admin || auth.permissions.includes(permission);
    const items = [
        {
            label: 'Tenant',
            href: `${base}/edit`,
            icon: Building2,
            show: auth.user.is_platform_admin,
        },
        {
            label: 'Users',
            href: `${base}/users`,
            icon: Users,
            show: allowed('user.view'),
        },
    ];

    return (
        <nav className="flex flex-wrap gap-2 border-b pb-4">
            {items
                .filter((item) => item.show)
                .map((item) => (
                    <Link
                        key={item.label}
                        href={item.href}
                        className={cn(
                            'inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-muted',
                            location.pathname.startsWith(item.href) &&
                                'bg-muted text-primary',
                        )}
                    >
                        <item.icon className="size-4" />
                        {item.label}
                    </Link>
                ))}
        </nav>
    );
}