<template>
  <div class="grid grid-cols-2 gap-6 md:grid-cols-3">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`simple-${option.value}`"
          v-model="primaryChoice"
          :label="option.label"
          :value="option.value"
          name="primary-choice"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Preselected</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`preselected-${option.value}`"
          v-model="preselectedChoice"
          :label="option.label"
          :value="option.value"
          name="preselected-choice"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Error</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`error-${option.value}`"
          v-model="errorChoice"
          :label="option.label"
          :value="option.value"
          name="error-choice"
          error="Selection required"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Success</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`success-${option.value}`"
          v-model="successChoice"
          :label="option.label"
          :value="option.value"
          name="success-choice"
          success="Selection saved"
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`disabled-${option.value}`"
          v-model="disabledChoice"
          :label="option.label"
          :value="option.value"
          name="disabled-choice"
          disabled
        />
      </div>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
      <div class="space-y-1">
        <MalioRadioButton
          v-for="option in options"
          :key="`readonly-${option.value}`"
          v-model="readonlyChoice"
          :label="option.label"
          :value="option.value"
          name="readonly-choice"
          readonly
          hint="Readonly group"
        />
      </div>
    </div>
  </div>
</template>

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

const options = [
  {label: 'Option 1', value: 'option1'},
  {label: 'Option 2', value: 'option2'},
  {label: 'Option 3', value: 'option3'},
  {label: 'Option 4', value: 'option4'},
]

const primaryChoice = ref<string | null>(null)
const preselectedChoice = ref<string | null>('option2')
const errorChoice = ref<string | null>(null)
const successChoice = ref<string | null>('option3')
const disabledChoice = ref<string | null>('option2')
const readonlyChoice = ref<string | null>('option4')
</script>
