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

interface Character {
    citizen_id: string;
    name: string;
    money: Record<string, number>;
    job: { label: string; grade_label: string };
    gang: { label: string } | null;
}

export default function Show({ character }: { character: Character }) {
    return (
        <AppLayout>
            <Head title={character.name} />
            <CharacterTabs citizenId={character.citizen_id} active="characters.show" />

            <h1 className="mb-6 text-2xl font-bold">{character.name}</h1>

            <div className="grid gap-4 sm:grid-cols-3">
                <div className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                    <p className="text-sm text-gray-400">Job</p>
                    <p className="text-lg font-semibold">{character.job.label}</p>
                    <p className="text-xs text-gray-500">{character.job.grade_label}</p>
                </div>
                <div className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                    <p className="text-sm text-gray-400">Gang</p>
                    <p className="text-lg font-semibold">{character.gang?.label ?? 'None'}</p>
                </div>
                <div className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                    <p className="text-sm text-gray-400">Cash / Bank</p>
                    <p className="text-lg font-semibold">
                        ${character.money.cash ?? 0} / ${character.money.bank ?? 0}
                    </p>
                </div>
            </div>
        </AppLayout>
    );
}
