import routeFactory from '@/assets/constants/routeFactory';
import images from '@/assets/images/images';
import Button from '@/components/uikit/button';
import { IPageParams } from '@/models/layout';
import { getTranslations, setRequestLocale } from 'next-intl/server';

export async function generateMetadata({ params }: { params: IPageParams }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });

  return {
    title: t('page_not_found_metadata_title'),
    description: t('page_not_found_metadata_description'),
  };
}

export default async function NotFound({ params }: { params: IPageParams }) {
  const paramsData = await params;
  const t = await getTranslations({ locale: paramsData.locale });
  const routes = routeFactory(t, paramsData.locale);

  return (
    <div className="container mx-auto flex h-svh flex-col items-center justify-center gap-6">
      <h2 className="text-center text-4xl md:text-[5rem]">
        {t('pages_notFound_title')}
      </h2>
      <p className="text-center text-xl text-gray-300 md:text-2xl">
        {t('pages_notFound_description')}
      </p>
      <div>
        <img
          alt="404 page"
          src={images.notFound.src}
          className="aspect-square"
        />
      </div>
      <Button link={routes.home.route()} endIcon="showMore" className="w-fit">
        {t('pages_notFound_button')}
      </Button>
    </div>
  );
}