import { Button } from "@repo/shadcn-ui/components";
import { HomeIcon } from "lucide-react";
import { JSX } from "react";
import { useNavigate } from "react-router-dom";
import { BackHistoryButton } from "./buttons/back-history-button.tsx";

interface ErrorOverlayProps {
  title?: string;
  subtitle?: string;
  description?: string;

  errorMessage?: string;
  //errorStatusCode?: number | string | undefined;
}

/*const _DrawByStatusCode = {
    0: UndrawAutumn,
    404: UndrawNoData, //UndrawEmpty,
};*/

export const ErrorOverlay = ({
  title = "Se ha producido un error",
  subtitle = "Inténtalo de nuevo más tarde",
  description = undefined,
  errorMessage = undefined,
}: //errorStatusCode = undefined,
ErrorOverlayProps): JSX.Element => {
  const navigate = useNavigate();
  /*const ErrorIllustration = () =>
        String(errorStatusCode).length
            ? _DrawByStatusCode[String(errorStatusCode)]
            : _DrawByStatusCode['0'];*/

  return (
    <div className='h-fit place-items-center-safe mt-10 '>
      <div className='text-center'>
        <h2 className='mt-2 text-xl font-semibold text-center text-slate-900'>{title}</h2>
        <p className='mt-1 font-medium text-slate-500'>
          {subtitle || errorMessage}
          <br />
          {description}
        </p>
        <div className='mt-6 space-x-8 md:ml-4'>
          <BackHistoryButton />
          <Button onClick={() => navigate("/")}>
            <HomeIcon className='w-4 h-4 mr-2' /> Ir al inicio
          </Button>
        </div>
      </div>
    </div>
  );
};

ErrorOverlay.displayName = "ErrorOverlay";