<script setup lang="ts">
import { inject } from 'vue'
import { SunIcon, MoonIcon } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'

const isDarkMode = inject('isDarkMode') as { value: boolean }
const toggleTheme = inject('toggleTheme') as () => void
const { t } = useI18n()

const toggleColorMode = () => {
  toggleTheme()
}
</script>

<template>
  <button
    type="button"
    @click="toggleColorMode"
    class="flex h-11 w-11 items-center justify-center rounded-full shadow-sm transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 motion-safe:hover:rotate-180"
    :aria-label="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
    :title="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
    :class="
      isDarkMode
        ? 'bg-[#263941] text-[#d8c98e]'
        : 'bg-[#edf4f5] text-[#4f6c75]'
    "
  >
    <SunIcon v-if="!isDarkMode" class="w-6 h-6" />
    <MoonIcon v-else class="w-6 h-6" />
  </button>
</template>
