import React from 'react'
import { Link } from 'react-router-dom'
import { FaFrown } from 'react-icons/fa'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { useLocalization } from '@/utils/hooks/useLocalization'

const NotFound: React.FC = () => {
  const { translate } = useLocalization()

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-white p-4 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
      <FaFrown size={128} className="mb-6 text-blue-600" />
      <h1 className="mb-4 text-7xl font-bold text-gray-900 dark:text-gray-100">404</h1>
      <p className="mb-8 max-w-md text-center text-xl text-gray-600 dark:text-gray-300">
        {translate('::Public.notFound.message')}
      </p>
      {/* `<a href>` tam sayfa yeniden yukleme yapiyordu; SPA yonlendirmesi kullanilir. */}
      <Link
        to={ROUTES_ENUM.public.home}
        className="rounded-lg bg-blue-600 px-6 py-3 text-lg font-semibold text-white transition duration-300 hover:bg-blue-700"
      >
        {translate('::Public.notFound.button')}
      </Link>
    </div>
  )
}

export default NotFound