<template>
  <Story title="Button/Button">
    <Variant title="Primary">
      <div class="grid grid-cols-2 items-start gap-3 p-4">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
        <MalioButton label="Valider" />
        <MalioButton label="Valider" icon-name="mdi:check" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
        <MalioButton label="Valider" disabled />
        <MalioButton label="Valider" disabled icon-name="mdi:check" />
      </div>
    </Variant>

    <Variant title="Secondary">
      <div class="grid grid-cols-2 items-start gap-3 p-4">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
        <MalioButton label="Modifier" variant="secondary" />
        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
        <MalioButton label="Modifier" variant="secondary" disabled />
        <MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
      </div>
    </Variant>

    <Variant title="Tertiary">
      <div class="grid grid-cols-2 items-start gap-3 p-4">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
        <MalioButton label="Voir plus" variant="tertiary" />
        <MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
        <MalioButton label="Voir plus" variant="tertiary" disabled />
        <MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
      </div>
    </Variant>

    <Variant title="Danger">
      <div class="grid grid-cols-2 items-start gap-3 p-4">
        <p class="text-xs font-semibold text-m-muted">Default</p>
        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
        <MalioButton label="Supprimer" variant="danger" />
        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Hover</p>
        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Active</p>
        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" icon-position="left" />
        <p class="text-xs font-semibold text-m-muted">Disabled</p>
        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
        <MalioButton label="Supprimer" variant="danger" disabled />
        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
      </div>
    </Variant>

    <Variant title="Largeur personnalisée">
      <div class="flex flex-col items-start gap-3 p-4">
        <MalioButton label="Pleine largeur" button-class="w-full" />
        <MalioButton label="Compact" button-class="w-auto px-6" />
      </div>
    </Variant>
  </Story>
</template>

<docs lang="md">
# MalioButton

Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle.

## Props

| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `id` | `string` | auto-généré | Identifiant HTML du bouton |
| `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) |
| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
| `disabled` | `boolean` | `false` | Désactive le bouton |
| `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) |
| `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) |
| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte |
| `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels |

## Variantes

- **Primary** : Fond `m-btn-primary`, texte blanc — action principale
- **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire
- **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire
- **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice

## États

Chaque variante a 4 états visuels : Default, Hover, Active, Disabled.

## Dimensions par défaut

- Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass`
- Hauteur : 40px (`h-[40px]`)
- Police : 16px bold, line-height 150%

## Accessibilité

- `type="button"` évite la soumission de formulaire involontaire
- Support `disabled` natif
- Focus visible avec `focus-visible:ring-2`

## Events

| Event | Payload | Description |
|-------|---------|-------------|
| `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |
</docs>

<script setup lang="ts">
import MalioButton from '../../components/malio/button/Button.vue'

defineOptions({ name: 'ButtonStory' })
</script>
