import * as React from "react"

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

type SectionHeadingProps = {
  eyebrow: string
  title: React.ReactNode
  description?: React.ReactNode
  align?: "left" | "center"
  className?: string
  /** 리드 문단 폭 제한 등 (예: "max-w-2xl") */
  descriptionClassName?: string
}

function SectionHeading({ eyebrow, title, description, align = "left", className, descriptionClassName }: SectionHeadingProps) {
  return (
    <div className={cn(align === "center" && "text-center", className)}>
      <Typography variant="eyebrow" className="mb-3 block">
        {eyebrow}
      </Typography>
      <Typography variant="title">{title}</Typography>
      {description && (
        <Typography variant="lead" className={cn("mt-5", align === "center" && "mx-auto", descriptionClassName)}>
          {description}
        </Typography>
      )}
    </div>
  )
}

export { SectionHeading }