<template>
  <div class="day-selector">
    <v-chip
      v-for="hari in dayList"
      :key="hari.hari"
      class="day-chip"
      :class="{ 'day-chip-active': selectedDays.includes(hari.hari) }"
      label
      @click="toggleDay(hari.hari)"
    >
      <v-icon v-if="selectedDays.includes(hari.hari)" left size="16">mdi-check</v-icon>
      {{ hari.hari }}
    </v-chip>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  }
});

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

const dayList = ref([
  { no: 1, hari: 'Senin' },
  { no: 2, hari: 'Selasa' },
  { no: 3, hari: 'Rabu' },
  { no: 4, hari: 'Kamis' },
  { no: 5, hari: 'Jum\'at' },
]);

const selectedDays = ref(props.modelValue);

const toggleDay = (hari) => {
  const index = selectedDays.value.indexOf(hari);
  if (index > -1) {
    selectedDays.value.splice(index, 1);
  } else {
    selectedDays.value.push(hari);
  }
  emit('update:modelValue', selectedDays.value);
};
</script>

<style scoped lang="scss">
$neutral-100: #FFFFFF;
$neutral-500: #ABBED1;
$neutral-800: #4D4D4D;
$secondary-300: #DBEDFF;
$secondary-600: #0671E0;
$font-weight-medium: 500;

.day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.day-chip {
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: $font-weight-medium;
  border: 1px solid $neutral-500;
  background-color: $neutral-100;
  color: $neutral-800;
  
  &:hover {
    background-color: $secondary-300;
  }
}

.day-chip-active {
  background-color: $secondary-600 !important;
  color: $neutral-100 !important;
  border-color: $secondary-600 !important;
}
</style>