<script lang="ts">
  import type { Snippet } from 'svelte';

  interface Props {
    heading?: string;
    /** Extra top margin (for non-first sections). */
    spaced?: boolean;
    children: Snippet;
  }

  let { heading, spaced = false, children }: Props = $props();
</script>

<div class="section" class:spaced>
  {#if heading}
    <h3 class="section-heading">{heading}</h3>
  {/if}
  {@render children()}
</div>

<style>
  .section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .section.spaced {
    margin-top: 0.875rem;
  }

  .section-heading {
    margin: 0.125rem 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ctp-overlay0);
  }
</style>
