'use client'

import { useEffect } from 'react'
import { useTranslations, useLocale } from 'next-intl'
import { Button } from '@/components/ui/button'
import { AlertTriangle, RefreshCw, Home } from 'lucide-react'
import Link from 'next/link'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  const t = useTranslations('errors')
  const locale = useLocale()
  
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-[#1E1E2E] via-[#002647] to-[#1E1E2E]">
      <div className="text-center max-w-md mx-auto px-6">
        <div className="w-20 h-20 bg-red-600/20 rounded-2xl flex items-center justify-center mx-auto mb-6 border border-red-600/30">
          <AlertTriangle className="w-10 h-10 text-red-400" />
        </div>
        <h2 className="text-2xl font-bold text-white mb-2">{t('somethingWentWrong')}</h2>
        <p className="text-gray-400 mb-6">{error.message || t('unexpectedError')}</p>
        <div className="flex items-center justify-center gap-3">
          <Button onClick={reset} className="bg-[#0087FF] hover:bg-[#0072d1] text-white px-6 py-2 rounded-xl">
            <RefreshCw className="w-4 h-4 mr-2" />
            {t('tryAgain')}
          </Button>
          <Link href={`/${locale}`}>
            <Button variant="outline" className="border-[#0087FF]/30 text-[#8ab4ff] hover:bg-[#0087FF]/10 px-6 py-2 rounded-xl">
              <Home className="w-4 h-4 mr-2" />
              {t('goHome')}
            </Button>
          </Link>
        </div>
      </div>
    </div>
  )
}