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

const tabs = [
    { label: 'Overview', route: 'characters.show' },
    { label: 'Inventory', route: 'inventory.show' },
    { label: 'Vehicles', route: 'vehicles.index' },
    { label: 'Houses', route: 'houses.index' },
    { label: 'Bank', route: 'bank.show' },
    { label: 'Job', route: 'job.show' },
    { label: 'Gang', route: 'gang.show' },
    { label: 'Stats', route: 'stats.show' },
];

export default function CharacterTabs({ citizenId, active }: { citizenId: string; active: string }) {
    return (
        <div className="mb-6 flex flex-wrap gap-1 border-b border-white/10 pb-2">
            {tabs.map((tab) => (
                <Link
                    key={tab.route}
                    href={route(tab.route, citizenId)}
                    className={`rounded-md px-3 py-1.5 text-sm ${
                        tab.route === active ? 'bg-brand-600 text-white' : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                    }`}
                >
                    {tab.label}
                </Link>
            ))}
        </div>
    );
}
