interface SectionHeadingProps {
  id: string
  title: string
  subtitle?: string
  className?: string
}

/** 섹션 제목. `id`는 섹션의 aria-labelledby 대상이다. */
export function SectionHeading({ id, title, subtitle, className = '' }: SectionHeadingProps) {
  return (
    <div className={className}>
      <h2 id={id} className="keep-ko text-balance text-h2 font-medium text-neutral-50">
        {title}
      </h2>
      {subtitle && (
        <p className="mt-4 max-w-xl keep-ko text-base leading-relaxed text-neutral-300">{subtitle}</p>
      )}
    </div>
  )
}