<template>
  <div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioInputTextArea/>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
      <MalioInputTextArea
        v-model="hintValue"
        label="Description"
        hint="Ajoutez un contexte clair"
        :size="4"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
      <MalioInputTextArea
        v-model="iconValue"
        label="Commentaire"
        icon-name="mdi:comment-text-outline"
        :size="3"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
      <div class="space-y-4">
        <MalioInputTextArea
          v-model="errorValue"
          label="Message"
          error="Le message est trop court"
          :size="3"
        />
        <MalioInputTextArea
          v-model="successValue"
          label="Message"
          success="Message valide"
          :size="3"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
      <div class="space-y-4">
        <MalioInputTextArea
          model-value="Contenu en lecture seule"
          label="Readonly"
          readonly
          :size="3"
        />
        <MalioInputTextArea
          model-value="Champ indisponible"
          label="Disabled"
          disabled
          :size="3"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
      <MalioInputTextArea
        v-model="resizeValue"
        label="Notes"
        resize="both"
        :size="4"
        :min-resize-width="300"
        :max-resize-width="700"
        :min-resize-height="120"
        :max-resize-height="280"
        hint="Resize limite en largeur et hauteur"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
      <MalioInputTextArea
        v-model="counterValue"
        label="Message"
        :size="5"
        :max-length="120"
        :show-counter="true"
        hint="Le compteur est en bas a gauche"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'

const hintValue = ref('')
const iconValue = ref('')
const errorValue = ref('abc')
const successValue = ref('Contenu ok')
const resizeValue = ref('Vous pouvez redimensionner ce champ.')
const counterValue = ref('')

</script>
