<template>
  <b-col class="d-flex align-items-center date-picker">
    <span
      :class="{ 'switch-active': timeScale === 'hour' }"
      @click="switchTimeScale('hour')"
      >{{ $t('global.datePicker.lastHour') }}</span
    >
    <span
      :class="{ 'switch-active': timeScale === 'day' }"
      @click="switchTimeScale('day')"
      >{{ $t('global.datePicker.lastDay') }}</span
    >
  </b-col>
</template>

<script>
export default {
  props: {
    timeScale: {
      type: String,
      default: 'hour',
    },
  },

  methods: {
    switchTimeScale(period) {
      this.$emit('changePeriod', period);
    },
  },
};
</script>
<style lang="scss" scoped>
.date-picker {
  height: 48px;
  max-width: 150%;
  width: auto;
  margin: -2rem -1.95rem 0px -2rem;
  padding-left: 2rem;
  @include media-breakpoint-down(md) {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -0.95rem;
  }
  border-bottom: 1px solid $gray-10;
  gap: 24px;
}

.switch-active {
  color: $primary;
  transition: ease-in 0.15s;
}
</style>
