import * as React from "react"

import { Typography } from "@/components/ui/typography"
import { cn } from "@/lib/utils"

/*
 * 섹션 머리.
 *
 * eyebrow 는 선택이고, 기본적으로 쓰지 않는다. 작은 색 라벨을 섹션마다 반복하면
 * 레퍼런스에서는 영문 대문자라 조판 요소로 기능하지만, 한글은 대문자가 없어서
 * 그냥 "작은 글씨"가 되고 일곱 번 반복되면 벽지가 된다.
 * 위계는 라벨이 아니라 헤드라인 크기(본문의 3.5~4배)와 2톤 대비로 만든다.
 */
type SectionHeadingProps = {
  eyebrow?: string
  title: React.ReactNode
  description?: React.ReactNode
  align?: "left" | "center"
  /** 다크 무대 섹션(bg="stage")에서는 "stage" 를 준다. Typography 변형이 먹색을 물고 있어서 필요하다. */
  tone?: "light" | "stage"
  className?: string
  /** 리드 문단 폭 제한 등 (예: "max-w-2xl") */
  descriptionClassName?: string
}

function SectionHeading({
  eyebrow,
  title,
  description,
  align = "left",
  tone = "light",
  className,
  descriptionClassName,
}: SectionHeadingProps) {
  const onStage = tone === "stage"

  return (
    <div className={cn(align === "center" && "text-center", className)}>
      <Typography variant="eyebrow" className={cn("mb-3 block", onStage && "text-primary-on-stage")}>
        {eyebrow}
      </Typography>
      <Typography variant="title" className={cn(onStage && "text-on-stage")}>
        {title}
      </Typography>
      {description && (
        <Typography
          variant="lead"
          className={cn("mt-5", align === "center" && "mx-auto", onStage && "text-on-stage-soft", descriptionClassName)}
        >
          {description}
        </Typography>
      )}
    </div>
  )
}

export { SectionHeading }