import { useNavigate } from 'react-router';
import { RainbowButton } from '../../components/rainbow-button';
import { LayoutWithSky } from '../../components/layouts-inner';
import { AnimatedDudeWithWire } from './graphics/dude';
import { Routes } from '../../lib/links';
import { useT } from '../../lib/use-t';

export const NotFound = () => {
  const t = useT();
  const navigate = useNavigate();

  return (
    <LayoutWithSky className="pt-32">
      <div
        aria-hidden
        className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
      >
        <AnimatedDudeWithWire className="animate-spin" />
      </div>
      <h1 className="text-6xl font-alpha calt mb-10">{'Not found'}</h1>

      <p className="text-lg mb-10">
        {t("The page you're looking for doesn't exists.")}
      </p>

      <p className="text-lg mb-10">
        <RainbowButton
          onClick={() => navigate(Routes.REFERRALS)}
          variant="border"
          className="text-xs"
        >
          {t('Go back and try again')}
        </RainbowButton>
      </p>
    </LayoutWithSky>
  );
};