import { Button } from '@/components/ui/button';
import { SharedData } from '@/types';
import { Link, router, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

interface ErrorPageProps {
  error: string;
  description: string;
  imageSrc?: string;
}

const ErrorLayout = ({ error, description, imageSrc }: ErrorPageProps) => {
  const { name } = usePage<SharedData>().props;
  const { t } = useTranslation();
  const year = new Date().getFullYear();

  const handleGoBack = () => {
    if (window.history.length > 1) {
      window.history.back();
      return;
    }

    router.visit('/');
  };

  return (
    <main className="mx-auto flex min-h-screen w-full flex-col bg-white font-poppins">
      <section className="flex h-80 w-full flex-none items-end justify-center bg-[#EDEDED]">
        {imageSrc && (
          <img
            src={imageSrc}
            alt={error}
            className="h-full max-h-72 w-auto max-w-full object-contain"
          />
        )}
      </section>

      <section className="flex flex-1 flex-col items-center justify-center bg-white px-6 py-10">
        <h1 className="text-center text-[clamp(56px,10vw,128px)] leading-none font-bold text-[#0C1D26]">
          {error}
        </h1>

        <p className="mt-4 max-w-[720px] text-center text-base text-[#0C1D26]/50">
          {description}
        </p>

        <Button
          type="button"
          variant="default"
          onClick={handleGoBack}
          className="mt-6 h-11 min-w-32 rounded-lg px-8"
        >
          {t('Go Back')}
        </Button>
      </section>

      <footer className="flex flex-wrap items-center justify-between gap-4 px-6 pb-6">
        <p className="text-black/50">
          &copy; {year} {name ?? 'Predixio'}. {t('All rights reserved')}
        </p>

        <div className="flex items-center gap-4 text-right text-[#0C1D26]">
          <Link href="/privacy-policy">{t('Privacy Policy')}</Link>
        </div>
      </footer>
    </main>
  );
};

export default ErrorLayout;