<template>
  <Story title="Input/Number">
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Simple</h2>
        <MalioInputNumber
          v-model="simpleValue"
          label="Quantite"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
        <MalioInputNumber
          v-model="initialValue"
          label="Participants"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
        <MalioInputNumber
          v-model="boundedValue"
          label="Places"
          :min="1"
          :max="5"
          hint="Minimum 1, maximum 5"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Desactive</h2>
        <MalioInputNumber
          v-model="disabledValue"
          label="Articles"
          disabled
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
        <MalioInputNumber
          v-model="readonlyValue"
          label="Tickets"
          readonly
          hint="Valeur verrouillee"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
        <MalioInputNumber
          v-model="errorValue"
          label="Quantite"
          :min="1"
          error="La quantite minimale est 1"
        />
      </div>

      <div class="rounded-lg border p-4">
        <h2 class="mb-4 text-xl font-bold">Succes</h2>
        <MalioInputNumber
          v-model="successValue"
          label="Quantite"
          success="Quantite validee"
        />
      </div>
    </div>
  </Story>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MalioInputNumber from '../components/malio/InputNumber.vue'

const simpleValue = ref('')
const initialValue = ref('3')
const boundedValue = ref('2')
const disabledValue = ref('4')
const readonlyValue = ref('7')
const errorValue = ref('0')
const successValue = ref('2')
</script>
