<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">Simple</h2>
      <div class="flex gap-4">
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Retour"
        />
        <MalioButtonIcon
          icon="mdi:pencil-outline"
          aria-label="Modifier"
        />
        <MalioButtonIcon
          icon="mdi:close"
          aria-label="Fermer"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
      <div class="flex gap-4">
        <MalioButtonIcon
          icon="mdi:download"
          aria-label="Télécharger"
        />
        <MalioButtonIcon
          icon="mdi:bell-outline"
          aria-label="Notifications"
        />
        <MalioButtonIcon
          icon="mdi:cog-outline"
          aria-label="Paramètres"
        />
        <MalioButtonIcon
          icon="mdi:view-grid-outline"
          aria-label="Grille"
        />
        <MalioButtonIcon
          icon="mdi:format-list-bulleted"
          aria-label="Liste"
        />
        <MalioButtonIcon
          icon="mdi:folder-outline"
          aria-label="Dossier"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <div class="flex gap-4">
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Retour"
          disabled
        />
        <MalioButtonIcon
          icon="mdi:pencil-outline"
          aria-label="Modifier"
          disabled
        />
        <MalioButtonIcon
          icon="mdi:close"
          aria-label="Fermer"
          disabled
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
      <div class="flex items-center gap-4">
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Petit"
          :icon-size="16"
        />
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Normal"
          :icon-size="24"
        />
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Grand"
          :icon-size="32"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Ghost</h2>
      <div class="flex gap-4">
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Retour"
          variant="ghost"
        />
        <MalioButtonIcon
          icon="mdi:pencil-outline"
          aria-label="Modifier"
          variant="ghost"
        />
        <MalioButtonIcon
          icon="mdi:cancel-bold"
          aria-label="Fermer"
          variant="ghost"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
      <div class="flex gap-4">
        <MalioButtonIcon
          icon="mdi:arrow-left"
          aria-label="Retour"
          variant="ghost"
          disabled
        />
        <MalioButtonIcon
          icon="mdi:pencil-outline"
          aria-label="Modifier"
          variant="ghost"
          disabled
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec événement click</h2>
      <div class="flex items-center gap-4">
        <MalioButtonIcon
          icon="mdi:plus"
          aria-label="Incrémenter"
          @click="counter++"
        />
        <span class="text-lg font-semibold">{{ counter }}</span>
        <MalioButtonIcon
          icon="mdi:minus"
          aria-label="Décrémenter"
          @click="counter--"
        />
      </div>
    </div>
  </div>
</template>

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

const counter = ref(0)
</script>
