<script setup lang="ts">
import { Button } from '@/components/ui/button'

export interface SegmentOption {
  value: string
  label?: string
  icon?: unknown
  title?: string
}

interface Props {
  options: SegmentOption[]
  modelValue: string
}

defineProps<Props>()
defineEmits<{ 'update:modelValue': [value: string] }>()
</script>

<template>
  <div class="flex items-center border rounded-md h-8 p-0.5">
    <Button
      v-for="option in options"
      :key="option.value"
      variant="ghost"
      size="sm"
      :class="{ 'bg-muted': modelValue === option.value }"
      :title="option.title"
      class="h-7 px-2"
      @click="$emit('update:modelValue', option.value)"
    >
      <component :is="option.icon" v-if="option.icon" class="h-4 w-4" />
      <template v-if="option.label">{{ option.label }}</template>
    </Button>
  </div>
</template>
