<template>
  <div :class="['flex gap-3.5', fullWidth ? 'w-full' : 'flex-wrap']">
    <button
      v-for="option in options"
      :key="option.value"
      type="button"
      @click="!option.disabled && handleSelect(option)"
      :class="[
        getStateClasses(option).base,
        getStateClasses(option).state,
        getStateClasses(option).disabled
      ]"
      v-bind="getOptionAriaAttributes(option)"
    >
      <div class="flex flex-col items-center gap-2">
        <div class="text-3xl">
          <slot :name="`icon-${option.value}`" />
        </div>
        <span class="text-sm font-medium">{{ option.label }}<span v-if="showCheckmark && isSelected(option)"> ✓</span></span>
      </div>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { SelectRendererProps } from '@/types/components'

interface Props extends SelectRendererProps {
  fullWidth?: boolean
}

withDefaults(defineProps<Props>(), {
  fullWidth: false
})
</script>
