o2o-site-AEO/solution/frontend/src/features/builder/canvas/primitives/SectionHeading.tsx

/**
 * 섹션 제목 — 그 자체로 배리에이션을 갖는 원자.
 *
 * 섹션 배리에이션을 바꿔도 제목 스타일은 따로 고를 수 있어야 한다
 * ("갤러리는 격자로, 제목은 가운데 정렬" 같은 조합이 실제로 나온다).
 */
import type {ReactNode} from 'react';
import type {TemplateItem} from '@o2o/shared';
import {cn} from '@/lib/utils';

export type HeadingStyle = 'underline' | 'centered' | 'eyebrow' | 'minimal';

interface SectionHeadingProps {
  title: string;
  subtitle?: string;
  /** 제목 위에 얹는 작은 라벨. eyebrow · centered 스타일에서 쓴다. */
  eyebrow?: string;
  variant?: HeadingStyle;
  /** 제목 오른쪽에 붙는 것(경고 배지, 추가 버튼 등). */
  trailing?: ReactNode;
  /**
   * 템플릿 색 토큰. 넘기면 제목은 text, eyebrow 는 accent 를 따른다.
   *
   * ★ 부제·밑줄은 일부러 중립 회색으로 남긴다 — 여기까지 토큰을 먹이면
   *   accent 가 밝은 템플릿에서 부제가 배경에 묻힌다.
   */
  colors?: TemplateItem['colors'];
  className?: string;
}

export function SectionHeading({
  title,
  subtitle,
  eyebrow,
  variant = 'underline',
  trailing,
  colors,
  className,
}: SectionHeadingProps) {
  const titleStyle = colors ? {color: colors.text} : undefined;
  const eyebrowStyle = colors ? {color: colors.accent} : undefined;

  if (variant === 'centered') {
    return (
      <div className={cn('space-y-2 text-center', className)}>
        {eyebrow && (
          <span
            className="text-[11px] font-semibold uppercase tracking-[0.2em] text-stone-400"
            style={eyebrowStyle}
          >
            {eyebrow}
          </span>
        )}
        <h2
          className="tpl-title serif-title text-xl font-bold tracking-tight text-stone-900 sm:text-2xl"
          style={titleStyle}
        >
          {title}
        </h2>
        {subtitle && <p className="text-xs text-stone-500 sm:text-sm">{subtitle}</p>}
        {trailing && <div className="flex justify-center pt-1">{trailing}</div>}
      </div>
    );
  }

  if (variant === 'eyebrow') {
    return (
      <div className={cn('flex items-start justify-between gap-3', className)}>
        <div className="space-y-1">
          {eyebrow && (
            <span
              className="block text-[11px] font-bold uppercase tracking-wider text-amber-700"
              style={eyebrowStyle}
            >
              {eyebrow}
            </span>
          )}
          <h2
            className="tpl-title serif-title text-xl font-bold tracking-tight text-stone-900 sm:text-2xl"
            style={titleStyle}
          >
            {title}
          </h2>
          {subtitle && <p className="text-xs text-stone-500">{subtitle}</p>}
        </div>
        {trailing}
      </div>
    );
  }

  if (variant === 'minimal') {
    // 여기서 제목은 사실상 작은 라벨이라 text 가 아니라 secondary 를 쓴다.
    return (
      <div className={cn('flex items-baseline justify-between gap-3', className)}>
        <h2
          className="tpl-title text-sm font-bold uppercase tracking-[0.18em] text-stone-500"
          style={colors ? {color: colors.secondary} : undefined}
        >
          {title}
        </h2>
        {trailing}
      </div>
    );
  }

  // underline — 기본. 아래 실선이 섹션의 시작을 확실히 끊어준다.
  return (
    <div
      className={cn(
        'flex flex-col justify-between gap-2 border-b border-stone-200/80 pb-4 sm:flex-row sm:items-baseline',
        className,
      )}
    >
      <div>
        <h2
          className="tpl-title serif-title text-xl font-bold tracking-tight text-stone-900 sm:text-2xl"
          style={titleStyle}
        >
          {title}
        </h2>
        {subtitle && <p className="mt-0.5 text-xs text-stone-500">{subtitle}</p>}
      </div>
      {trailing && <div className="self-start sm:self-auto">{trailing}</div>}
    </div>
  );
}