import { Head } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import CharacterTabs from '@/Components/CharacterTabs';

interface Vehicle {
    id: number | string;
    model: string;
    plate: string;
    garage: string | null;
    state: number;
}

interface Props {
    citizenId: string;
    characterName: string;
    vehicles: Vehicle[];
}

export default function Vehicles({ citizenId, characterName, vehicles }: Props) {
    return (
        <AppLayout>
            <Head title={`${characterName} — Vehicles`} />
            <CharacterTabs citizenId={citizenId} active="vehicles.index" />

            <h1 className="mb-6 text-2xl font-bold">Vehicles</h1>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 ring-1 ring-white/10">
                {vehicles.map((v) => (
                    <div key={v.id} className="flex items-center justify-between px-5 py-3">
                        <div>
                            <p className="font-medium">{v.model}</p>
                            <p className="text-xs text-gray-500">Plate: {v.plate}</p>
                        </div>
                        <span className="text-sm text-gray-400">{v.garage ?? 'Out in the world'}</span>
                    </div>
                ))}
                {vehicles.length === 0 && <p className="px-5 py-4 text-gray-400">No vehicles owned.</p>}
            </div>
        </AppLayout>
    );
}
