<script setup lang="ts">
import { useTheme } from '@/composables/useTheme'

const { isDark, toggleTheme } = useTheme()
</script>

<template>
    <button @click="toggleTheme" class="theme-toggle"
        :aria-label="isDark ? 'Activer le mode clair' : 'Activer le mode sombre'"
        :title="isDark ? 'Activer le mode clair' : 'Activer le mode sombre'">
        <!-- Sun icon for light mode -->
        <svg v-if="isDark" class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>

        <!-- Moon icon for dark mode -->
        <svg v-else class="theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
    </button>
</template>

<style scoped>
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--border-radius-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    background: var(--color-primary);
    color: var(--text-inverse);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-icon {
    width: 20px;
    height: 20px;
    transition: all var(--transition-fast);
}

/* Dark mode styles */
:global(.dark) .theme-toggle {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

:global(.dark) .theme-toggle:hover {
    background: var(--color-primary);
    color: var(--text-inverse);
}
</style>
