---
/**
 * Section — rythme vertical cohérent entre blocs de page.
 *
 * Props :
 *  - alt   (boolean, false) : fond alterné (--bg-alt) pour rythmer la page
 *  - size  ('base' | 'lg', 'base') : padding vertical --space-2xl ou --space-3xl
 *  - id    (string) : ancre
 *  - class (string) : classes additionnelles
 */
interface Props {
  alt?: boolean;
  size?: "base" | "lg";
  id?: string;
  class?: string;
}

const { alt = false, size = "base", id, class: className } = Astro.props;
---

<section
  class:list={["tf-section", { "tf-section--alt": alt, "tf-section--lg": size === "lg" }, className]}
  id={id}
>
  <slot />
</section>

<style>
  .tf-section {
    padding-block: var(--space-2xl);
  }

  .tf-section--lg {
    padding-block: var(--space-3xl);
  }

  .tf-section--alt {
    background: var(--bg-alt);
  }
</style>