<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
      <MalioAccordion v-model="multiple">
        <MalioAccordionItem title="Prix" value="prix">
          <p>Slider de prix ici…</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Catégorie" value="cat">
          <p>Liste de checkboxes ici…</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Marque" value="marque">
          <p>Recherche + liste ici…</p>
        </MalioAccordionItem>
      </MalioAccordion>
      <p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
      <MalioAccordion v-model="single" mode="single">
        <MalioAccordionItem title="Question 1" value="q1">
          <p>Réponse 1</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Question 2" value="q2">
          <p>Réponse 2</p>
        </MalioAccordionItem>
      </MalioAccordion>
      <p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
      <MalioAccordion>
        <MalioAccordionItem title="Section A" value="a" :default-open="true">
          <p>Ouverte au montage</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Section B" value="b">
          <p>Fermée au montage</p>
        </MalioAccordionItem>
      </MalioAccordion>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
      <MalioAccordion>
        <MalioAccordionItem title="Active" value="ok">
          <p>Contenu accessible</p>
        </MalioAccordionItem>
        <MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
          <p>Inaccessible</p>
        </MalioAccordionItem>
      </MalioAccordion>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

const multiple = ref<string[]>(['prix'])
const single = ref('q1')
</script>
