export const useTheme = () => {
  const theme = ref('light');

  onMounted(() => {
    // Check system preference
    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    
    const updateTheme = (e: MediaQueryListEvent | MediaQueryList) => {
      theme.value = e.matches ? 'dark' : 'light';
      document.documentElement.setAttribute('data-theme', theme.value);
    };

    darkModeMediaQuery.addEventListener('change', updateTheme);
    updateTheme(darkModeMediaQuery);
  });

  return {
    theme
  };
};