<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>
      <MalioInputAmount />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
      <MalioInputAmount
        label="Montant"
        name="amount"
        autocomplete="off"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Grand montant (séparateurs)</h2>
      <MalioInputAmount
        v-model="bigValue"
        label="Budget"
      />
      <div class="mt-2 rounded border p-3 text-sm">
        <p>modelValue émis : <code>{{ bigValue || 'vide' }}</code></p>
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputAmount
        model-value="125.00"
        disabled
        label="Montant désactivé"
      />
      <MalioInputAmount
        disabled
        label="Montant désactivé"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <MalioInputAmount
        model-value="42.50"
        readonly
        label="Montant readonly"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly vide)</h2>
      <MalioInputAmount
        label="Montant (readonly vide)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly (readonly rempli)</h2>
      <MalioInputAmount
        v-model="readonlyFilledAmount"
        label="Montant (readonly rempli)"
        :readonly="true"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
      <div class="mt-4">
        <MalioInputAmount
          model-value="12.3"
          label="Montant"
          error="Le montant est incorrect"
        />
      </div>
      <div class="mt-4">
        <MalioInputAmount
          model-value="89.90"
          label="Montant"
          success="Montant valide"
        />
      </div>
    </div>
  </div>
</template>

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

const readonlyFilledAmount = ref('1250.00')
const bigValue = ref('1234567.89')
</script>
