import { Link, useRouter } from "@tanstack/react-router";
import type { ReactNode } from "react";
import { ERROR_COPY } from "~/lib/error-copy";
import { Button, buttonClass } from "~/ui/Button";
import { ErrorScreen } from "~/ui/ErrorScreen";

const NOT_FOUND = 404;

export function NotFound({ children }: { children?: ReactNode }) {
  const router = useRouter();
  const copy = ERROR_COPY["not-found"];
  return (
    <ErrorScreen
      status={NOT_FOUND}
      title={copy.title}
      command={copy.command}
      description={children ?? copy.description}
      actions={
        <>
          <Link to="/" className={buttonClass("primary")}>
            Take me home
          </Link>
          <Button onClick={() => router.history.back()}>Go back</Button>
          <Link to="/explore" className={buttonClass("ghost")}>
            Explore repositories
          </Link>
        </>
      }
    />
  );
}