'use client'

import React from 'react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import Container from '@/components/ui/container'
import { FOOTER_MENUS } from '@/config/menuConfig'
import { DotLottieReact } from '@lottiefiles/dotlottie-react'

export default function NotFound() {
  const t = useTranslations()

  // Yaygın kullanılan linkleri gösterelim
  const commonLinks = FOOTER_MENUS.slice(0, 5)

  return (
    <Container className="flex flex-col items-center justify-center py-20">
      <DotLottieReact src="/lottie/error404.lottie" loop autoplay />
      <h1 className="text-2xl font-medium text-[#00a1a7] mb-4">{t('common.notFound.title')}</h1>
      <p className="text-center text-gray-600 mb-6 max-w-md">{t('common.notFound.description')}</p>

      {/* <div className="flex flex-wrap justify-center gap-4 mb-8">
        {commonLinks.map((link, index) => (
          <Link 
            key={index}
            href={link.path} 
            className="text-[#00a1a7] hover:underline"
          >
            {t(link.name)}
          </Link>
        ))}
      </div> */}

      <Link href="/" className="py-2.5 px-6 rounded-lg outline outline-1 outline-offset-[-1px] outline-cyan-600 inline-flex justify-center items-center gap-1 text-cyan-600 text-base font-semibold hover:bg-cyan-600 hover:text-white transition-colors">
        {t('common.notFound.home')}
      </Link>
    </Container>
  )
}