<template>
  <div class="flex gap-2">
    <div
        class="flex flex-wrap"
      :class="[
        'overflow-hidden transition-all duration-200',
        isExpanded ? 'max-h-[1000px]' : 'max-h-[2rem]',
      ]"
    >
      <slot></slot>
    </div>
    <button @click="isExpanded = !isExpanded" class="flex-shrink-0 w-6 h-6 mt-1">
      <!-- <svg
        xmlns="http://www.w3.org/2000/svg"
        :class="[
          'transform transition-transform duration-200',
          isExpanded ? 'rotate-90' : '',
        ]"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      > -->
      <ChevronsDown size="20" class="text-gray-600" :class="[
          'transform transition-transform duration-200',
          isExpanded ? 'rotate-180' : '',
        ]"
        viewBox></ChevronsDown>

        <!-- <polyline points="9 18 15 12 9 6" /> -->
      <!-- </svg> -->
    </button>
  </div>
</template>

<script setup>
import {
ChevronsDown
} from "lucide-vue-next";
import { ref } from "vue";
const isExpanded = ref(false);
</script>
