import React from 'react';
import { Frown } from 'lucide-react'; // Lucide-react kütüphanesinden Frown ikonunu import et
import { useLanguage } from '../context/LanguageContext';

const NotFound: React.FC = () => {
  const { t } = useLanguage();
  

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-white text-gray-700 p-4"> {/* Arka plan ve metin rengi güncellendi, padding eklendi */}
      <Frown size={128} className="text-blue-600 mb-6" /> {/* İkon boyutu ve rengi güncellendi */}
      <h1 className="text-7xl font-bold text-gray-900 mb-4">404</h1> {/* Başlık boyutu ve rengi güncellendi */}
      <p className="text-xl text-gray-600 mb-8 text-center max-w-md"> {/* Metin rengi, margin ve max-width güncellendi */}
        {t('notFound.message')}
      </p>
      <a href="/" className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300 text-lg font-semibold"> {/* Buton stili güncellendi */}
        {t('notFound.button')}
      </a>
    </div>
  );
};

export default NotFound;