<template>
  <q-list class="q-gutter-y-sm">
    <q-btn
      v-for="(option, index) in options"
      :key="index"
      flat
      no-caps 
      dense
      class="w100 q-pt-none"
      align="left"
      @click="model = option.value"
      :class="isSelected(option.value) ? 'text-primary' : ''"
    >
      <q-radio
        v-model="model"
        :val="option.value"
        size="md"
        color="primary"
        class="q-mr-xs"
        @click.stop 
      />
      
      <span :class="!isSelected(option.value) ? 'text-weight-regular' : ''">
        {{ $te(option.label) ? $t(option.label) : option.label }}
      </span>
    </q-btn>
  </q-list>
</template>

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

  interface ListOption {
    label: string
    value: string | number
  }

  defineProps<{
    options: ListOption[]
  }>()

  const model = defineModel<string | number | null>({
    required: true
  })

  const isSelected = computed(() => (value: string | number) => {
    return model.value === value
  })
</script>

<style scoped>
</style>
