import { type ReactNode } from "react";

interface SectionHeadingProps {
  /** Small tag label — e.g. "team", "get in touch" */
  tag?: string;
  /** Main heading text */
  title: string | ReactNode;
  /** Optional description paragraph below the heading */
  description?: string;
  /** HTML heading level */
  titleAs?: "h1" | "h2" | "h3" | "h4";
  /** Wrapper className */
  className?: string;
  /** Title className override */
  titleClassName?: string;
  /** Description className override */
  descriptionClassName?: string;
  /** Tag className override */
  tagClassName?: string;
}

/**
 * SectionHeading — page-level section header.
 *
 * Pattern: [tag] + heading + optional description.
 * Used for top-level section titles across all pages.
 *
 * For card-internal headings, use `CardHeading` instead.
 */
export function SectionHeading({
  tag,
  title,
  description,
  titleAs: Tag = "h2",
  className = "",
  titleClassName = "",
  descriptionClassName = "",
  tagClassName = "",
}: SectionHeadingProps) {
  return (
    <div className={className}>
      {tag && (
        <span
          className={`tenext-subheading mb-4 text-tenext-teal ${tagClassName}`}
          style={{ fontFamily: "var(--font-sora)" }}
        >
          {tag}
        </span>
      )}

      <Tag
        className={`tracking-[-0.03em] ${titleClassName}`}
        style={{
          fontFamily: "var(--font-dm-sans)",
          fontSize: "clamp(32px, 4vw, 56px)",
          fontWeight: 500,
          lineHeight: 1.1,
        }}
      >
        {title}
      </Tag>

      {description && (
        <p
          className={`mt-6 text-base leading-relaxed text-tenext-text-muted ${descriptionClassName}`}
        >
          {description}
        </p>
      )}
    </div>
  );
}