"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { fadeIn, stagger, staggerItem, scaleIn, buttonTap, buttonTapTarget, shake } from "@/lib/animations" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Gem, Sparkles, Box, Star, Zap, Shield, Swords, Trophy, RefreshCw } from "lucide-react" interface LootItem { name: string rarity: "Common" | "Rare" | "Epic" | "Legendary" color: string icon: any } const crateTypes = [ { name: "Bronze Crate", price: 200, color: "from-amber-700 to-amber-500", items: ["Common", "Rare"] }, { name: "Silver Crate", price: 500, color: "from-gray-400 to-gray-200", items: ["Common", "Rare", "Epic"] }, { name: "Gold Crate", price: 1200, color: "from-yellow-500 to-yellow-300", items: ["Rare", "Epic", "Legendary"] }, { name: "Diamond Crate", price: 2500, color: "from-cyan-400 to-blue-400", items: ["Epic", "Legendary"] }, ] const possibleItems: LootItem[] = [ { name: "Common Skin Shard", rarity: "Common", color: "from-gray-400 to-gray-300", icon: Box }, { name: "Rarity Blade", rarity: "Rare", color: "from-blue-400 to-blue-300", icon: Swords }, { name: "Phoenix Wings", rarity: "Epic", color: "from-purple-400 to-purple-300", icon: Zap }, { name: "Dragon's Breath", rarity: "Legendary", color: "from-amber-400 to-yellow-300", icon: Trophy }, { name: "Shadow Cloak", rarity: "Epic", color: "from-indigo-400 to-violet-300", icon: Shield }, { name: "Crystal Heart", rarity: "Rare", color: "from-pink-400 to-rose-300", icon: Star }, ] const rarityColors: Record = { Common: "from-gray-400 to-gray-300", Rare: "from-blue-500 to-blue-400", Epic: "from-purple-500 to-purple-400", Legendary: "from-amber-500 to-yellow-400", } const rarityBadge: Record = { Common: "bg-muted text-muted-foreground", Rare: "bg-blue-500/10 text-blue-500", Epic: "bg-purple-500/10 text-purple-500", Legendary: "bg-amber-500/10 text-amber-500", } export default function LootBox() { const [balance, setBalance] = useState(5000) const [opening, setOpening] = useState(false) const [result, setResult] = useState(null) const [selectedCrate, setSelectedCrate] = useState(0) const openCrate = () => { const crate = crateTypes[selectedCrate] if (balance < crate.price) return setBalance((b) => b - crate.price) setOpening(true) setResult(null) setTimeout(() => { const item = possibleItems[Math.floor(Math.random() * possibleItems.length)] setResult(item) setOpening(false) }, 2000) } return (

Loot Crates

Open crates for exclusive items.

{balance.toLocaleString()}

{crateTypes.map((crate, i) => ( setSelectedCrate(i)} variants={staggerItem} className={`rounded-xl border p-4 text-center transition-all ${selectedCrate === i ? "border-primary ring-2 ring-primary/30" : "hover:bg-muted"}`} >

{crate.name}

{crate.price}

{crate.items.map((r) => ( {r} ))}

))}

{opening ? ( ) : result ? ( ) : ( )} {result && !opening && ( {result.rarity}

{result.name}

)} {opening && (

Opening crate...

)} {balance < crateTypes[selectedCrate].price && (

Not enough gems!

)}

) }

Loot Box

Loot Crates

Loot Crates