import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
import '@/stories/styles/shared.css';

import * as AccordionStories from './Accordion.stories';

<Meta of={AccordionStories} />

<div className="header">
  <h1>Accordion</h1>
  <p>Le composant `Accordion` permet d'afficher du contenu dans des sections pliables/dépliables. Il est conforme aux normes d'accessibilité ARIA.</p>
</div>

## Utilisation standard

L'accordéon standard affiche une liste d'éléments avec un titre et un contenu simple.

<Canvas of={AccordionStories.Default} />

## API

<Controls of={AccordionStories.Default} />

## Événements

### update:modelValue

- **Type** : `(value: string[]) => void`
- **Description** : Émis lors de l'ouverture ou la fermeture d'un élément. La valeur est le tableau mis à jour des identifiants des éléments ouverts.

## Contenu avec objet

L'accordéon peut également afficher un contenu structuré sous forme d'objet avec un titre et un contenu détaillé.

<Canvas of={AccordionStories.WithObjectContent} />

## Niveau de titre personnalisé

Vous pouvez personnaliser le niveau de titre (h1-h6) utilisé pour les boutons de dévoilement.

<Canvas of={AccordionStories.CustomHeadingLevel} />

## Slots personnalisés

Vous pouvez également utiliser des slots pour personnaliser le rendu des titres et du contenu.

<Canvas of={AccordionStories.WithSlots} />

## Contrôle programmatique (v-model)

Le composant supporte `v-model` pour contrôler programmatiquement les éléments ouverts.
La valeur est un tableau de chaînes correspondant aux `id` des éléments ouverts.

<Canvas of={AccordionStories.WithVModel} />

## Éléments pré-ouverts

Vous pouvez pré-ouvrir des éléments en initialisant le `v-model` avec les identifiants souhaités.

<Canvas of={AccordionStories.PreOpened} />

## Exemple d'utilisation

<Source dark code={`
<script setup lang="ts">
import { ref } from 'vue'
import { Accordion } from '@cnamts/synapse'

const openItems = ref<string[]>([])

const accordionItems = [
  { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
  { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
  {
    id: 'item3',
    title: 'Section 3',
    content: {
      title: 'Sous-titre de la section 3',
      content: 'Contenu détaillé de la section 3'
    }
  }
]
</script>

<template>
  <main>
    <Accordion
      v-model="openItems"
      :items="accordionItems"
      :heading-level="3"
    />
  </main>
</template>
`} />