<template>
  <q-list class="q-gutter-y-sm">
    <q-btn
      v-for="(option, index) in options"
      :key="index"
      flat
      no-caps dense
      class="w100"
      align="left"
      @click="selectItem(option)"
      :class="isSelected(option.value) ? 'text-primary' : ''"
      >
      <q-icon
        :name="isSelected(option.value) ? 'mdi-check' : ''"
        color="primary" 
        class="q-pr-sm"
      />    
      <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
  })

  const selectItem = (option: ListOption) => {
    model.value = option.value
  }
</script>

<style scoped>
</style>