import {
  PageFrame,
  type PageFrameMaxWidth,
  type PageFrameProps,
} from "./page-frame";
import { createElement, type ReactNode } from "react";
import { cn } from "../../lib/cn";

export type PageSectionMaxWidth = PageFrameMaxWidth;

export type PageSectionProps = Omit<PageFrameProps, "header"> & {
  actions?: ReactNode;
  as?: "div" | "section";
  description?: ReactNode;
  descriptionClassName?: string;
  eyebrow?: ReactNode;
  eyebrowClassName?: string;
  header?: ReactNode;
  headingAs?: "h2" | "h3";
  title?: ReactNode;
  titleClassName?: string;
};

/** A section frame with breadcrumbs followed by a contained semantic header. */
export function PageSection({
  actions,
  as = "section",
  description,
  descriptionClassName,
  eyebrow,
  eyebrowClassName,
  header,
  headerClassName,
  headingAs = "h2",
  title,
  titleClassName,
  ...props
}: PageSectionProps) {
  const hasGeneratedHeader = Boolean(eyebrow || title || description || actions);
  const generatedHeader = hasGeneratedHeader ? (
    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
      <div className="min-w-0">
        {eyebrow ? (
          <div
            className={cn(
              "mb-2 text-xs font-medium uppercase tracking-[0.16em] text-[var(--uhuru-accent-strong)]",
              eyebrowClassName,
            )}
          >
            {eyebrow}
          </div>
        ) : null}
        {title
          ? createElement(
              headingAs,
              {
                className: cn(
                  "m-0 text-3xl font-semibold tracking-[-0.04em] text-[var(--uhuru-text-primary)]",
                  titleClassName,
                ),
                style: { fontFamily: "var(--uhuru-font-heading)" },
              },
              title,
            )
          : null}
        {description ? (
          <div
            className={cn(
              "mt-2 max-w-2xl text-sm leading-6 text-[var(--uhuru-text-secondary)]",
              descriptionClassName,
            )}
          >
            {description}
          </div>
        ) : null}
      </div>
      {actions ? (
        <div className="flex shrink-0 flex-wrap items-center gap-2">
          {actions}
        </div>
      ) : null}
    </div>
  ) : null;

  const sectionHeader = header !== undefined ? header : generatedHeader;

  return (
    <PageFrame
      as={as}
      header={sectionHeader}
      headerClassName={cn("uhuru-card px-5 py-5", headerClassName)}
      {...props}
    />
  );
}