import { Meta, Canvas, Controls, Source, Story } from '@storybook/blocks';
import '@/stories/styles/shared.css';
import * as SyTabsStories from "./SyTabs.stories";

<Meta of={SyTabsStories} />

<div className="header">
  <h1>SyTabs</h1>
  <p>Le composant `SyTabs` est un système de navigation par onglets conforme au Design System qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. Il permet d'organiser le contenu en sections navigables facilement via une interface à onglets.</p>
</div>

## API

<Controls of={SyTabsStories.Default} />

## Structure des données

Le composant `SyTabs` attend un tableau d'objets `TabItem` avec la structure suivante :

```typescript
export interface TabItem {
  label: string       // Texte affiché dans l'onglet
  value: string | number  // Valeur unique utilisée pour v-model
  content?: string    // Contenu textuel de l'onglet (optionnel)
  disabled?: boolean  // État désactivé (optionnel)
}
```


## Personnalisation

Le composant peut être personnalisé via l'objet `vuetifyOptions` qui permet de modifier l'apparence des onglets :

> **Important** : Ces options de personnalisation doivent être passées via la prop `vuetifyOptions` et non comme props directes du composant. Par exemple, utilisez `:vuetify-options="{ sheet: { dense: true } }"` plutôt que `:sheet="{ dense: true }"`.

```javascript
{
  sheet: { 
    theme: 'default|dark|light',  // Thème de l'arrière-plan
    color: '#fff',                // Couleur d'arrière-plan
    dense: false                  // Mode compact
  },
  tabs: {
    height: '48',                 // Hauteur des onglets
    'show-arrows': true           // Affichage des flèches de défilement
  },
  tab: {
    'base-color': '#0C419A',      // Couleur de base des onglets
    'active-color': '#0C419A',    // Couleur de l'onglet actif
    'slider-color': '#0C419A',    // Couleur de l'indicateur actif
    'ripple': false               // Effet de ripple
  }
}
```

<Canvas of={SyTabsStories.CustomTheme} />

## Bonnes pratiques

- Limitez le nombre d'onglets pour éviter une surcharge cognitive
- Utilisez des libellés courts et descriptifs
- Assurez une cohérence visuelle entre les onglets et leur contenu
- Préservez l'état des onglets lors de la navigation entre pages si nécessaire