import { getTranslations } from 'next-intl/server';

import { IoArrowBack } from 'react-icons/io5';

import { Link } from '@/i18n/navigation';

export default async function NotFound() {
  const t = await getTranslations('notFoundPage');

  return (
    <div className="min-h-[60vh] flex flex-col justify-center items-center text-center gap-6">
      <h2 className="text-2xl font-bold text-mma-blue">{t('heading')}</h2>
      <p className="text-gray-500">{t('description')}</p>
      <Link
        href="/"
        className="group cursor-pointer flex items-center gap-1 md:gap-2 hover:opacity-90 px-2 md:px-4 py-1.5 md:py-2 transition font-medium shadow-md bg-neutral-200 text-mma-blue hover:bg-mma-yellow"
      >
        <IoArrowBack className="w-4 h-4" />
        {t('backToHome')}
      </Link>
    </div>
  );
}