import { clsx } from "@/lib/cx";

export function Card({

  as: Tag = "div",

  className,

  hover = false,

  children,

  ...rest

}: {

  as?: React.ElementType;

  className?: string;

  hover?: boolean;

  children: React.ReactNode;

  [key: string]: unknown;

}) {

  return (

    <Tag

      className={clsx(

        "rounded-[3px] border border-line bg-surface",

        hover && "transition-colors hover:bg-graphite",

        className

      )}

      {...rest}

    >

      {children}

    </Tag>

  );

}

export function SectionHeader({

  eyebrow,

  title,

  description,

  className,

}: {

  eyebrow?: string;

  title?: React.ReactNode;

  description?: React.ReactNode;

  className?: string;

}) {

  return (

    <div className={clsx("mb-6", className)}>

      {eyebrow ? <p className="label mb-2">{eyebrow}</p> : null}

      {title ? (

        <h2

          className="display text-paper"

          style={{ fontSize: "clamp(1.25rem, 4vw, 1.875rem)" }}

        >

          {title}

        </h2>

      ) : null}

      {description ? (

        <p className="prose-lead mt-3 max-w-2xl text-ash">{description}</p>

      ) : null}

    </div>

  );

}

export function PageHeader({

  eyebrow,

  title,

  lead,

}: {

  eyebrow: string;

  title: string;

  lead?: string;

}) {

  return (

    <header

      style={{

        borderBottom: "1px solid var(--dk-line)",

        paddingBottom: "clamp(28px, 5vw, 48px)",

        marginBottom: "clamp(28px, 5vw, 48px)",

      }}

    >

      {}

      <p

        className="label"

        style={{

          color: "var(--dk-signal)",

          marginBottom: "20px",

          display: "flex",

          alignItems: "center",

          gap: "8px",

          fontSize: "12px",

          letterSpacing: "0.14em",

        }}

      >

        <span

          aria-hidden="true"

          style={{

            width: "5px",

            height: "5px",

            borderRadius: "50%",

            background: "var(--dk-signal)",

            display: "inline-block",

            flexShrink: 0,

          }}

        />

        {eyebrow}

      </p>

      {}

      <h1

        className="font-display text-paper"

        style={{

          fontSize: "clamp(2rem, 7vw, 3.75rem)",

          fontWeight: 900,

          lineHeight: 1.0,

          letterSpacing: "-0.01em",

          wordSpacing: "0.06em",

          textTransform: "uppercase",

          maxWidth: "18ch",

          marginBottom: lead ? "24px" : 0,

          overflowWrap: "anywhere",

          hyphens: "auto",

        }}

      >

        {title}

      </h1>

      {}

      {lead ? (

        <p

          className="font-prose"

          style={{

            fontStyle: "italic",

            fontSize: "clamp(1rem, 1.8vw, 1.125rem)",

            lineHeight: 1.55,

            color: "var(--dk-ash)",

            maxWidth: "52ch",

          }}

        >

          {lead}

        </p>

      ) : null}

    </header>

  );

}