---
// CP-STRUCT-003 section
interface Props {
  id?: string;
  title?: string;
  variant?: 'default' | 'tinted' | 'dark';
  spacing?: 'default' | 'compact' | 'large';
}
const { id, title, variant = 'default', spacing = 'default' } = Astro.props;
const ariaLabelledBy = title && id ? `${id}-heading` : undefined;
---
<section
  id={id}
  class={`section section--${variant} section--${spacing}`}
  aria-labelledby={ariaLabelledBy}
>
  {title && (
    <header class="section__header">
      <h2 id={ariaLabelledBy} class="section__title">{title}</h2>
    </header>
  )}
  <slot />
</section>

<style>
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .section--compact {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .section--large {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .section--tinted {
    background: var(--color-surface, #f9f6f1);
  }
  .section--dark {
    background: #1a1a1a;
    color: #fff;
  }
  .section__header {
    max-width: 1100px;
    margin: 0 auto 2rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .section__title {
    font-family: var(--font-heading, Georgia, serif);
    font-size: 2rem;
    margin: 0;
  }
</style>