import type { CSSProperties } from 'react'

type HeaderTitleProps = {
  placeholder: string
  secondary: string
  primary: string
  size?: 'md' | 'lg' | 'xl'
  align?: 'center' | 'start' | 'separated'
  /** When true, primary (larger) line is rendered above secondary */
  primaryFirst?: boolean
  className?: string
  style?: CSSProperties
}

export default function HeaderTitle({
  placeholder,
  secondary,
  primary,
  size = 'lg',
  align = 'center',
  primaryFirst = false,
  className = '',
  style,
}: HeaderTitleProps) {
  const layoutClass =
    align === 'center'
      ? 'text-center texts--overlap'
      : align === 'separated'
        ? 'text-start texts--separated'
        : 'text-start texts--overlap'

  return (
    <div className={`${layoutClass} size-${size} ${className}`} style={style}>
      <div className="header-title">
        <p className="header-title__placeholder">{placeholder}</p>
        <div className="header-title--top">
          {primaryFirst ? (
            <>
              <p className="header-title__primary">{primary}</p>
              <p className="header-title__secondary">{secondary}</p>
            </>
          ) : (
            <>
              <p className="header-title__secondary">{secondary}</p>
              <p className="header-title__primary">{primary}</p>
            </>
          )}
        </div>
      </div>
    </div>
  )
}
