<template>
  <div>
    <label v-if="label" class="block text-xs font-bold uppercase text-titan-green-800 mb-2">
      {{ label }}
    </label>
    <div class="flex flex-wrap gap-0.5">
      <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)"
      >
        {{ option.label }}<span v-if="isSelected(option)"> ✓</span>
      </button>
    </div>
    <p v-if="error && errorMessage" class="mt-2 text-sm text-red-600">
      {{ errorMessage }}
    </p>
  </div>
</template>

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

interface Props extends SelectRendererProps {}

defineProps<Props>()
</script>
