import { ArrowRight } from "lucide-react";
import { isRouteErrorResponse, Link, useRouteError } from "react-router-dom";

function RootError() {
  const error = useRouteError();
  const status = isRouteErrorResponse(error) ? error.status : null;
  const message = isRouteErrorResponse(error)
    ? error.statusText || "Something went wrong."
    : error?.message || "Something went wrong.";

  return (
    <div className="min-h-full flex items-center justify-center p-6">
      <div className="w-full max-w-[380px] flex flex-col gap-8">
        <div className="flex items-center gap-2.5">
          <FluxMark size={28} />
          <span className="text-fg text-base font-semibold tracking-[-0.02em]">FluxChat</span>
        </div>

        <div>
          {status && (
            <div className="font-mono text-[56px] leading-none font-semibold tracking-[-0.05em] text-accent mb-4">
              {status}
            </div>
          )}
          <h1 className="text-3xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
            Unexpected error.
          </h1>
          <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary font-mono break-words">
            {message}
          </p>
        </div>

        <Link
          to="/"
          className="w-full h-12 px-5 border-0 rounded-md font-sans text-[15px] font-medium tracking-[-0.005em] inline-flex items-center justify-between gap-2 bg-accent text-accent-fg cursor-pointer no-underline"
        >
          <span className="flex-1 text-left">Back home</span>
          <ArrowRight size={18} strokeWidth={1.75} />
        </Link>
      </div>
    </div>
  );
}

window.RootError = RootError;