import type { ReactNode } from "react";
import { cn } from "../../lib/cn";
import { Button } from "../button";
import { EmptyState } from "./empty-state";

export function EmptyStateScreen({
  action,
  description,
  eyebrow = "Empty state",
  title,
}: {
  action?: ReactNode;
  description: string;
  eyebrow?: string;
  title: string;
}) {
  return (
    <div className="flex min-h-[60vh] items-center justify-center px-4 py-10">
      <div className="grid w-full max-w-xl gap-4 text-center">
        <p className="m-0 text-[11px] uppercase tracking-[0.16em] text-[var(--uhuru-text-tertiary)]">
          {eyebrow}
        </p>
        <EmptyState
          action={action ? <div className="mx-auto">{action}</div> : undefined}
          description={description}
          title={title}
        />
      </div>
    </div>
  );
}

export function NotFoundScreen({
  action,
  appName = "Uhuru UI",
  description = "The page you were looking for could not be found.",
}: {
  action?: ReactNode;
  appName?: string;
  description?: string;
}) {
  return (
    <div className="flex min-h-[70vh] items-center justify-center px-4 py-10">
      <div className="grid w-full max-w-2xl gap-6 rounded-[var(--uhuru-radius-xl)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-6 text-center shadow-[var(--uhuru-shadow-md)]">
        <div className="grid gap-2">
          <p className="m-0 text-[11px] uppercase tracking-[0.18em] text-[var(--uhuru-text-tertiary)]">
            {appName}
          </p>
          <div className={cn("text-6xl font-semibold tracking-[-0.06em] text-[var(--uhuru-text-primary)]")}>
            404
          </div>
          <p className="m-0 text-lg text-[var(--uhuru-text-secondary)]">{description}</p>
        </div>
        <div className="grid gap-3">
          <Button className="mx-auto" tone="secondary">
            Go back home
          </Button>
          {action ? <div className="mx-auto">{action}</div> : null}
        </div>
      </div>
    </div>
  );
}