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

  let {
    label,
    open = false,
    id = undefined,
    class: cls = "",
    children,
  }: {
    label: string;
    open?: boolean;
    id?: string;
    class?: string;
    children: Snippet;
  } = $props();
</script>

<details {id} {open} class="pt-4 border-t border-zinc-200 group {cls}">
  <summary class="flex cursor-pointer list-none items-center gap-2 text-sm font-medium select-none">
    <Ico icon="mdi:chevron-right" class="size-4 shrink-0 transition-transform group-open:rotate-90" />
    {label}
  </summary>
  <div class="mt-4">
    {@render children()}
  </div>
</details>
