import type { ReactNode } from "react";

export function PageContainer({ children }: Readonly<{ children: ReactNode }>) {
  return <div className="page-container page-stack">{children}</div>;
}

export function Hero({
  actions,
  description,
  eyebrow,
  title,
}: Readonly<{
  actions?: ReactNode;
  description: string;
  eyebrow: string;
  title: string;
}>) {
  return (
    <header className="hero">
      <p className="hero__eyebrow">{eyebrow}</p>
      <h1 className="hero__title">{title}</h1>
      <p className="hero__description">{description}</p>
      {actions === undefined ? null : <div className="hero__actions">{actions}</div>}
    </header>
  );
}

export function ContentSection({
  children,
  description,
  eyebrow,
  heading,
}: Readonly<{
  children: ReactNode;
  description?: string;
  eyebrow?: string;
  heading: string;
}>) {
  return (
    <section className="section">
      <header className="section__header">
        {eyebrow === undefined ? null : <p className="section__eyebrow">{eyebrow}</p>}
        <h2 className="section__heading">{heading}</h2>
        {description === undefined ? null : <p className="section__description">{description}</p>}
      </header>
      {children}
    </section>
  );
}

export function EmptyState({
  action,
  description,
  title,
}: Readonly<{ action?: ReactNode; description: string; title: string }>) {
  return (
    <div className="empty-state">
      <h2>{title}</h2>
      <p>{description}</p>
      {action}
    </div>
  );
}

export function FormField({
  children,
  hint,
  label,
}: Readonly<{ children: ReactNode; hint?: string; label: string }>) {
  return (
    <label className="field">
      <span className="field__label">{label}</span>
      {children}
      {hint === undefined ? null : <span className="field__hint">{hint}</span>}
    </label>
  );
}

export function StatusBadge({ children }: Readonly<{ children: ReactNode }>) {
  return <span className="status-badge">{children}</span>;
}

export function Disclosure({
  children,
  summary,
}: Readonly<{ children: ReactNode; summary: string }>) {
  return (
    <details className="dialog">
      <summary>{summary}</summary>
      <div className="dialog__body">{children}</div>
    </details>
  );
}

export function Notification({
  children,
  tone = "info",
}: Readonly<{ children: ReactNode; tone?: "error" | "info" | "success" }>) {
  const liveMode = tone === "error" ? "assertive" : "polite";
  return (
    <div
      aria-live={liveMode}
      className={`notification notification--${tone}`}
      role={tone === "error" ? "alert" : "status"}
    >
      {children}
    </div>
  );
}