<script lang="ts">
  interface Props {
    title?: string;
    id?: any;
    open?: boolean;
    newLine?: boolean;
    children?: import('svelte').Snippet;
  }

  let {
    title = '',
    id = title.toLowerCase(),
    open = true,
    newLine = true,
    children
  }: Props = $props();
</script>

<details {open} {id}>
  {#if title}
    <summary>{title}</summary>
  {/if}

  {@render children?.()}
</details>

{#if newLine}
  <p></p>
{/if}
