---
interface Props {
  id?: string;
  eyebrow?: string;
  title?: string;
  subtitle?: string;
  class?: string;
}
const { id, eyebrow, title, subtitle, class: className } = Astro.props;
const hasHeader = Boolean(eyebrow || title || subtitle);
---
<section id={id} class:list={['py-16 sm:py-20', className]}>
  <div class="container-px">
    {hasHeader && (
      <div class="mx-auto max-w-2xl text-center">
        {eyebrow && <p class="text-sm font-semibold uppercase tracking-wide text-green">{eyebrow}</p>}
        {title && <h2 class="mt-2 text-3xl font-bold tracking-tight text-navy sm:text-4xl">{title}</h2>}
        {subtitle && <p class="mt-4 text-slate-600">{subtitle}</p>}
      </div>
    )}
    <slot />
  </div>
</section>