<script lang="ts">
  import * as Collapsible from '$lib/components/ui/collapsible'
  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down'
  import type { Snippet } from 'svelte'

  let {
    title,
    count,
    defaultOpen,
    children
  }: {
    title: string
    count?: number
    defaultOpen: boolean
    children: Snippet
  } = $props()

  let open = $state(false)
  $effect(() => {
    open = defaultOpen
  })
</script>

<Collapsible.Root bind:open class="rounded-md border bg-card">
  <Collapsible.Trigger
    class="flex w-full cursor-pointer select-none items-center justify-between gap-2 px-2 py-1 text-left hover:bg-muted/50"
  >
    <span class="text-xs font-medium">{title}{count !== undefined ? ` (${count})` : ''}</span>
    <ChevronDownIcon
      class="size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 {open
        ? 'rotate-180'
        : ''}"
      aria-hidden="true"
    />
  </Collapsible.Trigger>
  <Collapsible.Content
    class="overflow-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:animate-in data-[state=open]:fade-in"
  >
    <div class="border-t px-2 py-1.5">
      {@render children()}
    </div>
  </Collapsible.Content>
</Collapsible.Root>
