import type {ReactNode} from 'react';

/**
 * 파스텔의 섹션 제목 — 판 **가운데**에 굵고 큼직하게.
 *
 * ★ @/lib/ui 에서 아무것도 가져오지 않는다. Section 이 이 파일을 불러 쓰므로
 *   반대 방향 import 가 하나라도 생기면 순환 참조다.
 * ★ 제목 위 짧은 알약 하나만 장식으로 둔다. 색면 사이에서 제목이 시작하는 자리를
 *   표시하는 게 이 안의 규칙이고, 기본 안의 왼쪽 세로선을 가운데 정렬로 옮긴 것이다.
 * ★ h2 의 id 는 계약이다 — Section 의 aria-labelledby 가 `${id}-heading` 을 가리킨다.
 */
export function SectionHead({
  id,
  title,
  lead,
  aside,
}: {
  id: string;
  title: string;
  lead?: string;
  aside?: ReactNode;
}) {
  return (
    <header className="mb-8 flex flex-col items-center gap-3 text-center sm:mb-10">
      <i
        aria-hidden
        className="block h-[6px] w-10 rounded-full"
        style={{backgroundColor: 'var(--pastel-2, currentColor)', opacity: 0.9}}
      />

      <h2
        id={`${id}-heading`}
        className="h2 break-keep"
        style={{fontSize: 'calc(var(--fs-h2) * 1.15)', fontWeight: 800}}
      >
        {title}
      </h2>

      {/* 설명은 한 줄이다. 없으면 그리지 않는다 — 없는 문구를 지어내지 않는다. */}
      {lead && (
        <p className="measure text-[length:var(--fs-sm)] leading-relaxed opacity-65">{lead}</p>
      )}

      {aside && <div className="text-[length:var(--fs-sm)]">{aside}</div>}
    </header>
  );
}