type Summary = {
    playtime: number;
    roles_count: number;
    current_cash: number;
    last_char: string;
    leader_roles_count: number;
}

interface SummaryCardsProps {
    summary?: Summary;
}

export function SummaryCards({ summary }: SummaryCardsProps) {
    if (!summary) return null;

    const cards = [
        {
            title: 'Total Playtime',
            value: `${summary.playtime} Hrs`,
        },
        {
            title: 'Roles Count',
            value: summary.roles_count.toString(),
        },
        {
            title: 'Current Cash',
            value: summary.current_cash.toString(),
        },
        {
            title: 'Last Played',
            value: summary.last_char,
        },
        {
            title: 'Leader Roles',
            value: summary.leader_roles_count.toString(),
        },
    ];

    return (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5 mb-6">
            {cards.map((card) => (
                <div key={card.title} className="rounded-xl border bg-card text-card-foreground shadow">
                    <div className="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
                        <h3 className="tracking-tight text-sm font-medium">{card.title}</h3>
                    </div>
                    <div className="p-6 pt-0">
                        <div className="text-2xl font-bold truncate">{card.value}</div>
                    </div>
                </div>
            ))}
        </div>
    );
}