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

interface House {
    id: number | string;
    label: string;
    garage: string | null;
}

interface Props {
    citizenId: string;
    characterName: string;
    houses: House[];
}

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

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

            <div className="grid gap-4 sm:grid-cols-2">
                {houses.map((h) => (
                    <div key={h.id} className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                        <p className="font-medium">{h.label}</p>
                        {h.garage && <p className="text-sm text-gray-400">Garage: {h.garage}</p>}
                    </div>
                ))}
                {houses.length === 0 && <p className="text-gray-400">No houses owned.</p>}
            </div>
        </AppLayout>
    );
}
