import { useNavigate } from 'react-router'
import { Card, CardContent } from '@/components/ui/card'
import { Gamepad2, Timer, Keyboard } from 'lucide-react'

export const MiniGamesDashboard = () => {
    const navigate = useNavigate()

    return (
        <div className="p-8 max-w-5xl mx-auto min-h-[calc(100vh-4rem)]">
            <div className="mb-8">
                <h1 className="text-3xl font-bold tracking-tight mb-2">Mini Games</h1>
                <p className="text-muted-foreground">Gamify your learning with these quick challenges.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card
                    className="group cursor-pointer hover:shadow-xl transition-all hover:scale-[1.02] border-2 hover:border-primary/50 overflow-hidden"
                    onClick={() => navigate('/mini-games/hangman')}
                >
                    <div className="h-40 w-full bg-gradient-to-br from-indigo-500 to-purple-500 p-8 text-white flex flex-col justify-between relative overflow-hidden">
                        <Keyboard className="w-16 h-16 absolute -right-4 -bottom-4 opacity-20 rotate-12" />
                        <Gamepad2 className="w-8 h-8 opacity-90" />
                        <h2 className="text-3xl font-bold">Hangman</h2>
                    </div>
                    <CardContent className="p-6">
                        <p className="text-muted-foreground leading-relaxed">
                            Guess the Norwegian word from its definition before you run out of attempts. Great for testing vocabulary recall.
                        </p>
                    </CardContent>
                </Card>

                <Card
                    className="group cursor-pointer hover:shadow-xl transition-all hover:scale-[1.02] border-2 hover:border-primary/50 overflow-hidden"
                    onClick={() => navigate('/mini-games/speed')}
                >
                    <div className="h-40 w-full bg-gradient-to-br from-rose-500 to-orange-400 p-8 text-white flex flex-col justify-between relative overflow-hidden">
                        <Timer className="w-16 h-16 absolute -right-4 -bottom-4 opacity-20 rotate-12" />
                        <Timer className="w-8 h-8 opacity-90" />
                        <h2 className="text-3xl font-bold">10s Challenge</h2>
                    </div>
                    <CardContent className="p-6">
                        <p className="text-muted-foreground leading-relaxed">
                            Race against the clock! You have 10 seconds to list as many words as you can for a given category.
                        </p>
                    </CardContent>
                </Card>

                <Card
                    className="group cursor-pointer hover:shadow-xl transition-all hover:scale-[1.02] border-2 hover:border-primary/50 overflow-hidden md:col-span-2"
                    onClick={() => navigate('/mini-games/stop-the-bus')}
                >
                    <div className="h-40 w-full bg-gradient-to-br from-blue-600 to-cyan-500 p-8 text-white flex flex-col justify-between relative overflow-hidden">
                        <div className="w-16 h-16 absolute -right-4 -bottom-4 opacity-20 rotate-12 flex items-center justify-center border-4 border-white rounded-full text-4xl font-black">
                            A
                        </div>
                        <Gamepad2 className="w-8 h-8 opacity-90" />
                        <h2 className="text-3xl font-bold">Stop the Bus</h2>
                    </div>
                    <CardContent className="p-6">
                        <p className="text-muted-foreground leading-relaxed">
                            The classic classroom game! Pick a letter, get random categories, and find as many words as you can before the "Bus Stops" (2 minutes).
                        </p>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}
