<script setup lang="ts">
/**
 * ToolboxSection — Wrapper accordéon pour la boîte à outils.
 * Toggle le contenu pour économiser la hauteur visible.
 */

const props = withDefaults(
  defineProps<{
    title: string
    icon?: string
    defaultOpen?: boolean
  }>(),
  {
    icon: undefined,
    defaultOpen: false,
  },
)

const open = ref(props.defaultOpen)
</script>

<template>
  <div class="tsection" :class="{ 'tsection--open': open }">
    <button class="tsection__header" @click="open = !open">
      <UIcon v-if="icon" :name="icon" class="tsection__icon" />
      <span class="tsection__title">{{ title }}</span>
      <UIcon name="i-lucide-chevron-down" class="tsection__chevron" />
    </button>
    <div v-show="open" class="tsection__body">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.tsection {
  background: var(--mood-accent-soft);
  border-radius: 14px;
  overflow: hidden;
}

.tsection__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.tsection__header:hover {
  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
}

.tsection__icon {
  font-size: 0.9375rem;
  color: var(--mood-accent);
  flex-shrink: 0;
}

.tsection__title {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--mood-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tsection__chevron {
  font-size: 0.875rem;
  color: var(--mood-accent);
  opacity: 0.6;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tsection--open .tsection__chevron {
  transform: rotate(180deg);
}

.tsection__body {
  padding: 0 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
</style>
