<template>
    <div> <!-- lze oboji ;) -->
        <select @change="handleChange" v-model="theme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
        </select>
        <select @change="handleChange" v-model="selectedTheme">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
        </select>
    </div>
</template>

<script setup>
import { useThemeSelection } from '../composables/ThemeSelection';

const { selectedTheme, theme } = useThemeSelection();
const handleChange = event => {
    const newTheme = event.target.value;
    theme.value = newTheme; // Set the new theme
};
</script>

<style lang="scss" scoped></style>