<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>
      <MalioCheckbox
        v-model="simpleValue"
        label="Accepter les conditions"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Coche par default</h2>
      <MalioCheckbox
        v-model="checkedValue"
        label="Recevoir la newsletter"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Hint</h2>
      <MalioCheckbox
        v-model="hintValue"
        label="J'accepte le traitement des donnees"
        hint="Vous pouvez retirer votre consentement a tout moment."
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioCheckbox
        :model-value="false"
        label="Accepter les CGU"
        error="Ce champ est obligatoire."
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioCheckbox
        :model-value="true"
        label="Adresse vérifiée"
        success="Choix valide."
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
      <div class="space-y-4">
        <MalioCheckbox
          :model-value="true"
          label="Option désactivée"
          disabled
        />
        <MalioCheckbox
          :model-value="true"
          label="Option readonly"
          readonly
        />
      </div>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
      <div class="space-y-4">
        <MalioCheckbox
          label="Option 1"
        />
        <MalioCheckbox
          label="Option 2"
        />
        <MalioCheckbox
          label="Option 3"
        />
    </div>
    </div>
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
      <div class="space-y-4">
        <MalioCheckbox
          v-for="option in options"
          :key="option"
          :label="option"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
const simpleValue = ref(false)
const checkedValue = ref(true)
const hintValue = ref(false)
const options = [
  'Option A',
  'Option B',
  'Option C',
  'Option D',

]
</script>
