import { useId, type HTMLAttributes, type ReactNode } from "react";

/** A flat content group. Actions remain explicit buttons or links inside it. */
export function Card({
  eyebrow,
  heading,
  headingLevel = 3,
  children,
  footer,
  variant = "soft",
  span = "standard",
  className = "",
  ...props
}: HTMLAttributes<HTMLElement> & {
  eyebrow?: string;
  heading: ReactNode;
  headingLevel?: 2 | 3 | 4 | 5 | 6;
  footer?: ReactNode;
  variant?: "soft" | "outlined";
  span?: "standard" | "wide" | "featured";
}) {
  const headingId = useId();
  const Heading = `h${headingLevel}` as const;
  return (
    <article
      aria-labelledby={headingId}
      className={`ds-card ds-card--${variant} ds-card--${span} ${className}`}
      {...props}
    >
      <header className="ds-card-header">
        {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
        <Heading id={headingId} className="ds-card-title">{heading}</Heading>
      </header>
      {children && <div className="ds-card-body">{children}</div>}
      {footer && <footer className="ds-card-footer">{footer}</footer>}
    </article>
  );
}

/** Equal cards by default; bento spans keep the same reading order on mobile. */
export function CardGrid({
  layout = "equal",
  className = "",
  ...props
}: HTMLAttributes<HTMLDivElement> & { layout?: "equal" | "bento" }) {
  return <div className={`ds-card-grid ds-card-grid--${layout} ${className}`} {...props} />;
}
