<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">
  .with-header {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

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