SectionHeader

<SectionHeader
  number="02"
  title="Choose your game"
  subtitle="STAGE SELECT"
/>

import { cn } from '@/lib/utils'

interface SectionHeaderProps {
  number: string
  title: string
  subtitle?: string
  align?: 'left' | 'center'
  className?: string
}

const ALIGN_CLASSES: Record<NonNullable<SectionHeaderProps['align']>, string> = {
  left:   'text-left',
  center: 'text-center',
}

export function SectionHeader({
  number,
  title,
  subtitle,
  align = 'left',
  className,
}: SectionHeaderProps): React.JSX.Element {
  return (
    <div className={cn('mb-12', ALIGN_CLASSES[align], className)}>
      <div className="section-header-label">
        {number}{subtitle ? ` · ${subtitle.toUpperCase()}` : ''}
      </div>
      <h2 className="section-header-title">
        {title.split(' ').map((word, i, arr) =>
          i === arr.length - 1 ? (
            <span key={i} className="section-header-title-accent">
              {word}
            </span>
          ) : (
            <span key={i}>{word} </span>
          ),
        )}
      </h2>
    </div>
  )
}