<script lang="ts">
  export let title: string
  export let small: boolean = true
  export let badge: string | null = null
</script>

<div
  class="collapse collapse-arrow bg-base-200 {small
    ? 'collapse-sm'
    : 'collapse-md'}"
>
  <input type="checkbox" class="peer min-h-[24px]" />
  <div
    class="collapse-title font-medium flex items-center {small
      ? 'text-sm'
      : ''} min-h-[24px]"
  >
    {#if badge}
      <span class="badge badge-outline mr-2 px-1 text-xs min-w-[20px]"
        >{badge}</span
      >
    {/if}
    {title}
  </div>
  <div class="collapse-content flex flex-col gap-4" style="min-width: 0">
    <slot />
  </div>
</div>

<style>
  .collapse-sm input {
    max-height: 44px;
  }

  .collapse-sm .collapse-title::after {
    top: 1.4rem;
  }

  .collapse-sm .collapse-title {
    padding-top: 12px;
    padding-bottom: 12px;
  }
</style>
