<script setup lang="ts">
import { watch, onMounted } from 'vue';
import { useSettingsStore } from './stores/settings';
import Desktop from './components/Desktop.vue';

// Import global styles directly here using a relative path
import './assets/css/main.css';

const settingsStore = useSettingsStore();

// Function to apply the theme, ensuring it only runs on the client
const applyTheme = (theme: string) => {
  if (typeof document !== 'undefined') {
    // A more robust way to set the class
    document.body.classList.remove('theme-light', 'theme-dark');
    document.body.classList.add(`theme-${theme}`);
  }
};

// Watch for changes in the theme state and apply them
watch(() => settingsStore.theme, (newTheme) => {
  applyTheme(newTheme);
});

// Apply the initial theme when the app mounts on the client-side
onMounted(() => {
  applyTheme(settingsStore.theme);
});

</script>

<template>
  <div>
    <Desktop />
  </div>
</template>
