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

interface Item {
    name: string;
    label: string;
    amount: number;
    slot: number;
}

interface Props {
    citizenId: string;
    characterName: string;
    inventory: Item[];
}

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

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

            <div className="grid grid-cols-3 gap-3 sm:grid-cols-5 lg:grid-cols-8">
                {inventory.map((item) => (
                    <div key={item.slot} className="rounded-lg bg-gray-900 p-3 text-center ring-1 ring-white/10">
                        <p className="truncate text-sm font-medium">{item.label}</p>
                        <p className="text-xs text-gray-500">x{item.amount}</p>
                    </div>
                ))}

                {inventory.length === 0 && <p className="col-span-full text-gray-400">Inventory is empty.</p>}
            </div>
        </AppLayout>
    );
}
