export const useThemes = () => {
	const { $appHelpers } = useNuxtApp();

	const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY, {
		default: () => 'light',
		path: '/',
	});

	const theme = ref<'light' | 'dark'>(themeCookie.value);

	const applyTheme = (newTheme: 'light' | 'dark') => {
		theme.value = newTheme;
		themeCookie.value = newTheme;

		if (import.meta.client) {
			document.documentElement.setAttribute('data-theme', newTheme);
		}
	};

	const toggleTheme = () => {
		applyTheme(theme.value === 'light' ? 'dark' : 'light');
	};

	return {
		theme: readonly(theme),
		applyTheme,
		toggleTheme,
	};
};