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

interface Props {
    citizenId: string;
    characterName: string;
    stats: {
        played_hours: number;
        deaths: number;
        hunger: number;
        thirst: number;
        stress: number;
        is_dead: boolean;
    };
}

export default function Stats({ citizenId, characterName, stats }: Props) {
    const tiles: { label: string; value: string }[] = [
        { label: 'Play time', value: `${stats.played_hours.toFixed(1)}h` },
        { label: 'Deaths', value: String(stats.deaths) },
        { label: 'Hunger', value: `${stats.hunger}%` },
        { label: 'Thirst', value: `${stats.thirst}%` },
        { label: 'Stress', value: `${stats.stress}%` },
        { label: 'Status', value: stats.is_dead ? 'Dead' : 'Alive' },
    ];

    return (
        <AppLayout>
            <Head title={`${characterName} — Stats`} />
            <CharacterTabs citizenId={citizenId} active="stats.show" />

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

            <div className="grid gap-4 sm:grid-cols-3">
                {tiles.map((tile) => (
                    <div key={tile.label} className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10">
                        <p className="text-sm text-gray-400">{tile.label}</p>
                        <p className="text-2xl font-bold">{tile.value}</p>
                    </div>
                ))}
            </div>
        </AppLayout>
    );
}
