<script>
    import ChevronRight from "./icons/ChevronRight.svelte";

  let { children, title = "" } = $props()
</script>


<details class="group">
    <summary class="flex items-center justify-center text-center marker:content-none hover:cursor-pointer">
      <div class="flex flex-row items-center justify-between">
        <span>{title}</span>
        <ChevronRight class="size-4"/>
      </div> 
    </summary>
    <article class="border-l-1 border-orange-500 pl-4 mt-2 mb-2">
      {@render children()}
    </article>
</details>
