<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme'
import {
    SunIcon,
    MoonIcon,
    ComputerDesktopIcon,
    ChevronDownIcon,
} from '@heroicons/vue/24/outline'

const { isDark, setTheme, useSystemTheme } = useTheme()
const open = ref(false)

const selectLight = () => { setTheme('light'); open.value = false }
const selectDark = () => { setTheme('dark'); open.value = false }
const selectSystem = () => { useSystemTheme(); open.value = false }
</script>

<template>
    <div class="relative">
        <button @click="open = !open"
                class="flex items-center gap-1 rounded-lg p-2 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"
                :title="isDark ? 'Karanlık tema' : 'Aydınlık tema'">
            <SunIcon v-if="!isDark" class="h-5 w-5" />
            <MoonIcon v-else class="h-5 w-5" />
        </button>

        <div v-if="open" @click.away="open = false"
             class="absolute right-0 mt-2 w-48 rounded-xl border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-800 z-30 overflow-hidden">
            <button @click="selectLight"
                    class="flex w-full items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700"
                    :class="!isDark ? 'text-indigo-600 dark:text-indigo-400 font-medium' : 'text-slate-700 dark:text-slate-300'">
                <SunIcon class="h-4 w-4" /> Aydınlık
            </button>
            <button @click="selectDark"
                    class="flex w-full items-center gap-3 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700"
                    :class="isDark ? 'text-indigo-600 dark:text-indigo-400 font-medium' : 'text-slate-700 dark:text-slate-300'">
                <MoonIcon class="h-4 w-4" /> Karanlık
            </button>
            <button @click="selectSystem"
                    class="flex w-full items-center gap-3 border-t border-slate-200 dark:border-slate-700 px-4 py-2.5 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300">
                <ComputerDesktopIcon class="h-4 w-4" /> Sistem
            </button>
        </div>
    </div>
</template>
