<template>
  <div class="btn-group">
    <button
      v-for="option in options"
      :key="option.value"
      class="btn btn-sm"
      :class="{ 'btn-active': modelValue === option.value }"
      @click="$emit('update:modelValue', option.value)"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script setup lang="ts">
import type { TimeRange } from '../../../types/stats';

interface Props {
  modelValue: TimeRange;
}

defineProps<Props>();
defineEmits<{
  (e: 'update:modelValue', value: TimeRange): void;
}>();

const options = [
  { value: 'day' as TimeRange, label: 'Daily' },
  { value: 'week' as TimeRange, label: 'Weekly' },
  { value: 'month' as TimeRange, label: 'Monthly' }
];
</script>
