import { Link } from 'react-router-dom'
import { Button } from '@/components/ui'
import { Gamepad2, Home, Ghost } from 'lucide-react'

export function NotFoundPage() {
  return (
    <div className="min-h-[60vh] flex flex-col items-center justify-center text-center px-4">
      {/* Иконка с анимацией */}
      <div className="relative mb-8">
        <Ghost className="w-32 h-32 text-gray-700 animate-bounce" />
        <Gamepad2 className="w-12 h-12 text-primary-500 absolute -bottom-2 -right-2" />
      </div>

      {/* Заголовок */}
      <h1 className="text-7xl font-bold text-white mb-4">404</h1>
      <h2 className="text-2xl font-semibold text-gray-400 mb-2">
        Страница не найдена
      </h2>
      <p className="text-gray-500 mb-8 max-w-md">
        Похоже, эта страница ушла на марафон и не вернулась.
        Попробуй начать с главной.
      </p>

      {/* Кнопка */}
      <Link to="/">
        <Button size="lg" className="flex items-center gap-2">
          <Home className="w-5 h-5" />
          На главную
        </Button>
      </Link>
    </div>
  )
}