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

interface Props {
    citizenId: string;
    characterName: string;
    money: Record<string, number>;
}

export default function Bank({ citizenId, characterName, money }: Props) {
    return (
        <AppLayout>
            <Head title={`${characterName} — Bank`} />
            <CharacterTabs citizenId={citizenId} active="bank.show" />

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

            <div className="grid gap-4 sm:grid-cols-3">
                {Object.entries(money).map(([account, amount]) => (
                    <div key={account} className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                        <p className="text-sm capitalize text-gray-400">{account}</p>
                        <p className="text-2xl font-bold">${amount.toLocaleString()}</p>
                    </div>
                ))}
            </div>
        </AppLayout>
    );
}
