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

const drawerDefault = ref(false)
const drawerNoClose = ref(false)
const drawerCustomWidth = ref(false)
const drawerWithForm = ref(false)
</script>

<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Drawer simple</h2>
      <MalioButton label="Ouvrir le drawer" @click="drawerDefault = true" />
      <MalioDrawer v-model="drawerDefault" title="Titre du drawer">
        <p class="text-m-text">Contenu du drawer. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Sans bouton fermer</h2>
      <MalioButton label="Ouvrir le drawer" variant="secondary" @click="drawerNoClose = true" />
      <MalioDrawer v-model="drawerNoClose" title="Sans croix" :show-close="false">
        <p class="text-m-text">Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Largeur personnalisée</h2>
      <MalioButton label="Ouvrir le drawer large" variant="tertiary" @click="drawerCustomWidth = true" />
      <MalioDrawer v-model="drawerCustomWidth" title="Drawer large" drawer-class="max-w-2xl">
        <p class="text-m-text">Ce drawer utilise une largeur personnalisée via drawerClass.</p>
      </MalioDrawer>
    </div>

    <div class="rounded-lg border p-6">
      <h2 class="mb-6 text-xl font-bold">Avec formulaire</h2>
      <MalioButton label="Ouvrir le formulaire" variant="danger" @click="drawerWithForm = true" />
      <MalioDrawer v-model="drawerWithForm" title="Formulaire">
        <div class="flex flex-col gap-4">
          <MalioInputText label="Nom" />
          <MalioInputText label="Prénom" />
          <MalioInputText label="Email" />
          <MalioButton label="Enregistrer" button-class="w-full" @click="drawerWithForm = false" />
        </div>
      </MalioDrawer>
    </div>
  </div>
</template>
