'use client';

import NavigationButton from '@/app/[lang]/components/atoms/NavigationButton';
import { labels } from '@/app/constants/labels';
import useLayoutDimention from '@/utils/useLayoutDimention';
import { useEffect, useState } from 'react';

const NotFound = ({ language = 'de' }: { language?: string }) => {
  const [layoutDimensions, setLayoutDimensions] = useState({
    header: 68,
    footer: 131,
  });

  useLayoutDimention(layoutDimensions, setLayoutDimensions);

  useEffect(() => {}, [layoutDimensions, setLayoutDimensions]);

  return (
    <div className='flex items-center justify-center px-48 md:px-[3.875rem] sm:px-[1.375rem] h-screen'
    style={{
      minHeight: `calc(100vh - ${layoutDimensions.header + layoutDimensions.footer}px)`,
    }}>
      <div className='relative text-center'>
        <div className='absolute inset-0 flex flex-col items-center justify-center opacity-50'>
          <div className='text-[20rem] md:text-[12rem] sm:text-[8rem] font-bold text-green-500'>
            <span>UPPS</span>
          </div>
          <div className='text-[20rem] md:text-[12rem] sm:text-[8rem] font-bold text-green-500'>
            <span>404</span>
          </div>
        </div>

        <div className='relative text-2xl md:text-xl sm:text-base font-normal z-10'>
          <p>
            Wir können die von Ihnen gesuchte Seite nicht finden. | We cannot find the page you are looking for. | Nous n'avons pas trouvé la page que vous recherchez. | Non riusciamo a trovare la pagina che stai cercando.
          </p>
        </div>
        <div className='relative mt-8 z-10'>
          <NavigationButton text='HOME' url='/' />
        </div>
      </div>
    </div>
  );
};

export default NotFound;