---
import Eyebrow from '@/components/content/Eyebrow.astro';
import Headline from '@/components/content/Headline.astro';
import Lead from '@/components/content/Lead.astro';

interface Props {
    align?: 'center' | 'left';
    class?: string;
    description?: string;
    eyebrow?: string;
    title: string;
    titleHtml?: string;
    width?: 'default' | 'measure' | 'wide';
}

const {
    align = 'left',
    class: className = '',
    description,
    eyebrow,
    title,
    titleHtml,
    width = 'default',
} = Astro.props;
const widthClasses = {
    default: 'max-w-3xl',
    measure: 'max-w-[var(--reading-max-width)]',
    wide: 'max-w-4xl',
};
---

<div class:list={[widthClasses[width], align === 'center' ? 'mx-auto text-center' : '', className]}>
    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
    {titleHtml ? <Headline><Fragment set:html={titleHtml} /></Headline> : <Headline>{title}</Headline>}
    {description && <Lead class="mt-4">{description}</Lead>}
</div>