import { Head, useForm } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';

interface Item {
    id: number;
    name: string;
    image_path: string;
    category: { name: string };
}

interface Props {
    items: Item[];
    donateBalance: number;
}

export default function Roulette({ items, donateBalance }: Props) {
    const { post, processing } = useForm({});

    return (
        <AppLayout>
            <Head title="Roulette" />

            <div className="mb-6 flex items-center justify-between">
                <h1 className="text-2xl font-bold">Roulette</h1>
                <div className="rounded-md bg-gray-900 px-4 py-2 text-sm ring-1 ring-white/10">
                    Balance: <span className="font-semibold text-brand-400">{donateBalance}</span>
                </div>
            </div>

            <button
                onClick={() => post(route('roulette.spin'))}
                disabled={processing}
                className="mb-8 rounded-md bg-brand-600 px-6 py-3 font-semibold text-white hover:bg-brand-700 disabled:opacity-50"
            >
                Spin
            </button>

            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-6">
                {items.map((item) => (
                    <div key={item.id} className="rounded-lg bg-gray-900 p-3 text-center ring-1 ring-white/10">
                        <img src={item.image_path} alt="" className="mx-auto mb-2 h-16 w-16 object-contain" />
                        <p className="truncate text-sm font-medium">{item.name}</p>
                        <p className="text-xs text-gray-500">{item.category.name}</p>
                    </div>
                ))}
            </div>
        </AppLayout>
    );
}
