<template>
  <details class="admin-section" :open="open">
    <summary class="admin-section-header">
      <div class="i-lucide-chevron-right h-4 w-4 transition-transform section-arrow" />
      <span>{{ title }}</span>
    </summary>
    <div class="admin-section-body">
      <slot />
    </div>
  </details>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  open?: boolean
}>()
</script>

<style scoped>
.admin-section {
  border: 1px solid hsl(var(--color-surface-light));
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}

.admin-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: hsl(var(--color-text));
  cursor: pointer;
  background: hsl(var(--color-bg));
  user-select: none;
}

.admin-section-header:hover {
  background: hsl(var(--color-surface));
}

.admin-section[open] .section-arrow {
  transform: rotate(90deg);
}

.admin-section-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
</style>
