<template>
  <button class="theme-toggle" @click="toggleTheme" :aria-label="TEXTS.THEME.TOGGLE_LABEL">
    <span class="theme-icon">{{ themeIsDark ? '🌞' : '🌙' }}</span>
  </button>
</template>

<script setup lang="ts">
import { TEXTS } from '../config/content';
import { computed } from 'vue';

const props = defineProps({
  'isDark': {
    type: [Boolean, Object],
    default: false
  },
  'toggleTheme': {
    type: Function,
    required: true
  }
});

// Gérer le cas où isDark est un Ref<boolean> ou un booléen direct
const themeIsDark = computed(() => {
  if (typeof props.isDark === 'boolean') {
    return props.isDark;
  } else if (props.isDark && typeof props.isDark.value === 'boolean') {
    return props.isDark.value;
  }
  return false;
});
</script>

<style scoped>
@import '~/assets/css/components/theme-toggle.css';
</style>