import { Card, CardBody } from "@heroui/card";
import { Link } from "@tanstack/react-router";

export function NotFound({ children }: { children?: any }) {
  return (
    <div className="flex justify-center w-full">
    <Card className="w-full max-w-5xl min-h-[200px]">
      <CardBody className="p-2 flex justify-center flex-col items-center gap-5">
        <div className="text-gray-600 dark:text-gray-400 my-2 flex gap-2 items-center font-semibold">
          <span className="iconify size-6 solar--magnifer-zoom-out-bold-duotone " />
          {children || <p>La página que buscas no existe.</p>}
        </div>
        <div>
          <p className="flex items-center gap-2 flex-wrap">
            <button
              onClick={() => window.history.back()}
              className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
            >
              Volver
            </button>
            <Link
              to="/"
              className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
            >
              Ir a inicio
            </Link>
          </p>
        </div>
      </CardBody>
    </Card>
    </div>

  );
}