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

interface SectionHeaderProps {
  title: string
  subtitle?: string
  alignment?: 'left' | 'center'
  light?: boolean
  className?: string
}

export function SectionHeader({
  title,
  subtitle,
  alignment = 'center',
  light = false,
  className,
}: SectionHeaderProps) {
  return (
    <header
      className={cn(
        'mb-[50px]',
        alignment === 'center' ? 'text-center' : 'text-left',
        className
      )}
    >
      <h2
        className={cn(
          'font-heading font-bold text-[1.5em] tracking-[4px] uppercase mb-5',
          light ? 'text-white' : 'text-dark'
        )}
      >
        {title}
      </h2>

      {subtitle && (
        <p
          className={cn(
            'font-heading-alt font-light text-[1em] tracking-[2px] uppercase',
            light ? 'text-gray' : 'text-gray-light'
          )}
        >
          {subtitle}
        </p>
      )}
    </header>
  )
}
