<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>
      <MalioInputText v-model="simpleValue" />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputText
        v-model="nameValue"
        label="Nom d'utilisateur"
        name="username"
        autocomplete="username"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
      <MalioInputText
        v-model="searchValue"
        label="Recherche"
        icon-name="mdi:magnify"
        icon-size="20"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputText
        model-value="Valeur verrouillee"
        disabled
        label="Champ desactive"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputText
        model-value="Lecture seule"
        readonly
        label="Champ readonly"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
      <MalioInputText
        v-model="emailValue"
        label="Email"
        hint="Format attendu: nom@domaine.com"
      />
      <div class="mt-4">
        <MalioInputText
          model-value="abc"
          label="Code"
          error="Le code doit contenir au moins 6 caracteres"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Largeurs</h2>
      <div class="space-y-4">
        <MalioInputText
          label="Petit"
          min-width="w-56"
        />
        <MalioInputText
          label="Moyen"
          min-width="w-72"
        />
        <MalioInputText
          label="Large"
          min-width="w-full"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
      <MalioInputText
        model-value="ab"
        label="Code promo"
        icon-name="mdi:alert-circle-outline"
        icon-size="20"
        error="Le code est invalide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
      <MalioInputText
        v-model="cityValue"
        label="Ville"
        icon-name="mdi:map-marker-outline"
        icon-size="20"
        hint="Commencez à taper le nom de la ville"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
      <MalioInputText
        model-value="Commande #A-2048"
        label="Référence"
        readonly
        icon-name="mdi:lock-outline"
        icon-size="20"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
      <MalioInputText
        model-value="Compte indisponible"
        label="Compte"
        disabled
        icon-name="mdi:account-off-outline"
        icon-size="20"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const simpleValue = ref('')
const nameValue = ref('')
const searchValue = ref('')
const emailValue = ref('')
const cityValue = ref('')
</script>
