import { TrkSectionHeader, Trk } from '../lib/Trk';

const TYPE_SCALE = [
  { id: 'h1', tag: 'h1' as const, cls: 'text-2xl font-bold text-heading', example: '주요 타이틀 (H1 · text-2xl)' },
  { id: 'h2', tag: 'h2' as const, cls: 'text-xl font-bold text-heading', example: '페이지 제목 (H2 · text-xl)' },
  { id: 'h3', tag: 'h3' as const, cls: 'text-lg font-semibold text-heading', example: '섹션 제목 (H3 · text-lg)' },
  { id: 'h4', tag: 'h4' as const, cls: 'text-base font-semibold text-heading', example: '카드 제목 (H4 · text-base)' },
  { id: 'body', tag: 'p' as const, cls: 'text-sm text-label', example: '본문 텍스트 (body · text-sm)' },
  { id: 'body-sm', tag: 'p' as const, cls: 'text-xs text-label', example: '작은 본문 (body-sm · text-xs)' },
  { id: 'label', tag: 'span' as const, cls: 'text-[11px] text-label font-medium', example: '라벨 (label · 11px)' },
  { id: 'hint', tag: 'span' as const, cls: 'text-[10px] text-hint', example: '힌트/캡션 (hint · 10px)' },
];

export function TypographySection() {
  return (
    <>
      <TrkSectionHeader
        id="TRK-SEC-typography"
        title="타이포그래피"
        description="8단계 텍스트 스케일 + 시맨틱 색상 토큰 조합"
      />

      <div className="space-y-2">
        {TYPE_SCALE.map(({ id, tag: Tag, cls, example }) => (
          <Trk key={id} id={`TRK-TYPO-${id}`} className="ds-sample">
            <div className="flex items-center justify-between gap-4">
              <Tag className={cls}>{example}</Tag>
              <code className="text-[10px] text-hint font-mono whitespace-nowrap">{cls}</code>
            </div>
          </Trk>
        ))}
      </div>
    </>
  );
}
