import { Eyebrow, Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import { classNames } from '@/lib/components/classNames';
import styles from './SectionHeader.module.css';

interface SectionHeaderProps {
  eyebrow?: string;
  title: string;
  body?: string;
  headingLevel?: HeadingLevel;
  alignment?: 'start' | 'center';
  className?: string;
}

export function SectionHeader({
  eyebrow,
  title,
  body,
  headingLevel = 2,
  alignment = 'start',
  className,
}: SectionHeaderProps) {
  return (
    <header className={classNames(styles.header, styles[alignment], className)}>
      {eyebrow ? <Eyebrow>{eyebrow}</Eyebrow> : null}
      <Heading level={headingLevel} appearance="section">
        {title}
      </Heading>
      {body ? <Text variant="lead">{body}</Text> : null}
    </header>
  );
}
