<script setup>
const props = defineProps({
  modelValue: {
    type: String,
    default: 'last_week'
  }
})

const emit = defineEmits(['update:modelValue'])

const options = [
  { label: 'Today', value: 'today' },
  { label: 'Yesterday', value: 'yesterday' },
  { label: '7 Days', value: 'last_week' },
  { label: '30 Days', value: 'last_month' },
  { label: 'Quarter', value: 'last_quarter' },
  { label: '1 Year', value: 'last_year' },
]

const select = (val) => {
  emit('update:modelValue', val)
}
</script>

<template>
  <div class="period-selector">
    <button
      v-for="opt in options"
      :key="opt.value"
      class="button is-small"
      :class="{ 'is-info': modelValue === opt.value }"
      @click="select(opt.value)"
    >
      {{ opt.label }}
    </button>
  </div>
</template>

<style scoped>
.period-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .period-selector {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .period-selector .button {
    flex-shrink: 0;
  }
}
</style>
