import { Button } from "@/ui";
import { HomeIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { BackHistoryButton } from "../CustomButtons";

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 = undefined,
  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='grid h-screen place-items-center '>
      <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";