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

  const { header, value, children }: { header: string, value?: any, children?: Snippet } = $props();
</script>

{#if !!value}
  <div class="with-header">
    <h3>{header}</h3>
    {#if children}
      {@render children()}
    {:else}
      {value}
    {/if}
  </div>
{/if}

<style lang="scss">
  h3 {
    font-size: 1em;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
  }
</style>