<template>
  <Transition name="menu">
    <div
      v-if="isSideMenuVisible"
      class="flex absolute top-[1px] right-0 z-10 flex-col p-2 w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500">
      <div class="h-12">
        <button @click="isSideMenuVisible = false">
          <IconClose class="absolute top-0 right-1 h-12 text-xl btn" />
        </button>
      </div>
      <div class="flex flex-col flex-1 content-center items-center">
        <div class="h-12" />
        <InputSwitch
          class="mb-4"
          id="toggleNight"
          lbl-left="Day"
          lbl-right="Night"
          v-model="darkMode" />
        <InputSwitch
          class=""
          id="toggleLocale"
          lbl-left="English"
          lbl-right="Français"
          v-model="isLocaleFrench" />
      </div>

      <div class="mb-8 text-xs text-stone-500">
        Features to come:
        <ul class="ml-4 list-disc">
          <li>Keyboard input</li>
          <li>Random number</li>
          <li>Less bugs</li>
        </ul>
      </div>

      <div class="text-xs text-stone-500 dark:text-stone-600">
        Build {{ buildDate }}
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.menu-move,
.menu-enter-active,
.menu-leave-active {
  transition: all 0.5s ease;
}

.menu-enter-from,
.menu-leave-to {
  /* opacity: 0; */
  transform: translateX(100%);
}
</style>

<script setup lang="ts">
import { darkMode, isLocaleFrench } from '@/composables/settings'
import { isSideMenuVisible } from '@/composables/side-menu'
import IconClose from '~icons/ph/x'

import InputSwitch from './common/InputSwitch.vue'

const buildDate = import.meta.env.VITE_BUILD_DATE
</script>
