<script setup>
import { selectedDate, selectedDay } from "../store";
import ArrowIcon from "./icons/arrow-icon.vue";
import dayjs from "dayjs";
import { changeDate, previousDay, nextDay } from "../util";

const dayNames = [
  "days.sunday",
  "days.monday",
  "days.tuesday",
  "days.wednesday",
  "days.thursday",
  "days.friday",
  "days.saturday",
];
</script>

<template>
  <div class="selector">
    <ArrowIcon @click="previousDay" />
    <span class="day" @click="changeDate(dayjs())">
      {{ $t(dayNames[selectedDay + 1]) }},
      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
    </span>
    <ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
  </div>
</template>

<style scoped>
.selector {
  padding: 65px 10px 10px 10px;
  display: grid;
  grid-template-columns: 35px 1fr 35px;
  align-items: center;
  justify-items: center;
}

svg,
span {
  cursor: pointer;
}
</style>
