import type { ReactNode } from "react";
import { cn, Icon, type IconName } from "../kit";
import { Brand } from "../ui";

/** Every signed-out step: the mark over one white card on the grey frame, and the line that says what Context is. */
export function AuthFrame({ children, below }: { children: ReactNode; below?: ReactNode }) {
  return (
    <main className="flex min-h-dvh flex-col items-center bg-frame px-4 pt-[12vh] pb-10 font-sans max-sm:pt-10">
      <div className="flex w-full max-w-[420px] flex-col gap-6">
        <Brand className="self-center" />
        <div className="flex flex-col gap-5 rounded-2xl bg-page p-6 text-[13.5px] leading-5 text-body shadow-card sm:p-8">{children}</div>
        {below}
        <p className="m-0 flex items-center justify-center gap-1.5 text-[12px] text-subtle">
          <Icon name="shield-check-line" size={14} />
          An information tool. A clinician decides.
        </p>
      </div>
    </main>
  );
}

/** A step's title: an icon in a soft tile, the heading and one quiet line. */
export function StepTitle({ icon, iconClass = "text-ink", title, children }: { icon?: IconName; iconClass?: string; title: ReactNode; children?: ReactNode }) {
  return (
    <div className="flex flex-col gap-2">
      {icon && (
        <span className="mb-1 flex size-10 items-center justify-center rounded-xl bg-quiet">
          <Icon name={icon} size={20} className={iconClass} />
        </span>
      )}
      <h1 className="m-0 text-[22px] leading-7 font-semibold tracking-[-0.015em] text-ink">{title}</h1>
      {children && <p className="m-0 text-[14px] leading-[21px] text-muted">{children}</p>}
    </div>
  );
}

/** The code box: large mono digits, spaced, so a misread digit stands out. */
export const codeClass = "h-12 text-center font-mono text-[20px] tracking-[0.3em] placeholder:tracking-[0.3em]";

/** Quiet links under a form, spread to both ends. */
export const StepLinks = ({ children, className }: { children: ReactNode; className?: string }) => (
  <div className={cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2 text-[13px]", className)}>{children}</div>
);