import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "./cn";

/** Flat bordered surface. No shadow, 3 px radius. */
export function Card({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("rounded-sm border border-hair bg-surface", className)} {...rest}>
      {children}
    </div>
  );
}

export function CardHeader({ title, description, aside, className, level = 3 }: { title: ReactNode; description?: ReactNode; aside?: ReactNode; className?: string; level?: 2 | 3 }) {
  const H = level === 2 ? "h2" : "h3";
  return (
    <div className={cn("flex items-start justify-between gap-3 border-b border-hair px-3 py-2.5 sm:px-4", className)}>
      <div className="min-w-0">
        <H className="text-[13.5px] font-semibold leading-tight text-ink">{title}</H>
        {description && <p className="mt-0.5 text-[12px] text-ink-3">{description}</p>}
      </div>
      {aside && <div className="shrink-0">{aside}</div>}
    </div>
  );
}

export function CardBody({ className, children, padded = true }: { className?: string; children: ReactNode; padded?: boolean }) {
  return <div className={cn(padded && "px-3 py-3 sm:px-4", className)}>{children}</div>;
}

/** Page-level section: heading row + content, hairline top. */
export function Section({ title, description, aside, children, className, id, level = 2 }: { title: ReactNode; description?: ReactNode; aside?: ReactNode; children: ReactNode; className?: string; id?: string; level?: 2 | 3 }) {
  const H = level === 2 ? "h2" : "h3";
  return (
    <section id={id} className={cn("min-w-0 border-t border-hair pt-4", className)}>
      <div className="mb-3 flex items-end justify-between gap-3">
        <div className="min-w-0">
          <H className={cn("font-semibold leading-tight text-ink", level === 2 ? "text-[15px] sm:text-[16px]" : "text-[14px]")}>{title}</H>
          {description && <p className="mt-0.5 text-[12px] text-ink-3">{description}</p>}
        </div>
        {aside && <div className="shrink-0 text-right">{aside}</div>}
      </div>
      {children}
    </section>
  );
}

/** Uniform page container. */
export function Page({ children, className, wide }: { children: ReactNode; className?: string; wide?: boolean }) {
  return <div className={cn("mx-auto w-full px-3 sm:px-5 lg:px-8", wide ? "max-w-[1600px]" : "max-w-[1280px]", className)}>{children}</div>;
}

export function PageHeader({ title, eyebrow, description, aside, className }: { title: ReactNode; eyebrow?: ReactNode; description?: ReactNode; aside?: ReactNode; className?: string }) {
  return (
    <header className={cn("flex flex-col gap-3 py-5 sm:flex-row sm:items-end sm:justify-between sm:py-7", className)}>
      <div className="min-w-0">
        {eyebrow && <div className="label-caps mb-1.5">{eyebrow}</div>}
        <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">{title}</h1>
        {description && <p className="mt-1.5 max-w-2xl text-[13.5px] text-ink-2">{description}</p>}
      </div>
      {aside && <div className="shrink-0">{aside}</div>}
    </header>
  );
}