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

interface AchievementItem {
    key: string;
    name: string;
    description: string;
    icon_path: string | null;
    unlocked: boolean;
}

export default function Achievements({ achievements }: { achievements: AchievementItem[] }) {
    return (
        <AppLayout>
            <Head title="Achievements" />
            <h1 className="mb-6 text-2xl font-bold">Achievements</h1>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {achievements.map((a) => (
                    <div
                        key={a.key}
                        className={`rounded-lg p-4 ring-1 ${
                            a.unlocked ? 'bg-gray-900 ring-brand-600' : 'bg-gray-900/50 ring-white/10 opacity-60'
                        }`}
                    >
                        <div className="flex items-center gap-3">
                            {a.icon_path && <img src={a.icon_path} alt="" className="h-10 w-10" />}
                            <div>
                                <p className="font-semibold">{a.name}</p>
                                <p className="text-sm text-gray-400">{a.description}</p>
                            </div>
                        </div>
                        {a.unlocked && <p className="mt-2 text-xs font-medium text-brand-400">Unlocked</p>}
                    </div>
                ))}
            </div>
        </AppLayout>
    );
}
