<script setup>
import { ref, computed } from 'vue';
import { StyleService } from '@/Stores/style';

import {
	mdiContrastCircle,
	mdiInformation,
	mdiCheckCircle,
	mdiAlert,
	mdiAlertCircle,
	mdiOpenInNew,
	mdiClose,
	mdiReload,
	mdiTrendingUp,
} from '@mdi/js';
import SectionMain from '@/Components/SectionMain.vue';
import CardBox from '@/Components/CardBox.vue';
// import BaseButtons from '@/Components/BaseButtons.vue';
import BaseButton from '@/Components/BaseButton.vue';
// import NotificationBar from "@/components/NotificationBar.vue";
// import BaseDivider from "@/components/BaseDivider.vue";
// import CardBoxModal from "@/components/CardBoxModal.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
// import FormField from "@/components/FormField.vue";
// import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue";
// import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
// import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
// import CardBoxComponentTitle from "@/components/CardBoxComponentTitle.vue";
// import PillTag from "@/components/PillTag.vue";

// const modalOneActive = ref(false);
// const modalTwoActive = ref(false);
// const modalThreeActive = ref(false);
// const notificationSettingsModel = ref([]);

const styleService = StyleService();
</script>

<template>
	<LayoutAuthenticated>
		<SectionTitle first>Dark mode</SectionTitle>

		<SectionMain>
			<CardBox class="md:w-7/12 lg:w-5/12 xl:w-4/12 shadow-2xl md:mx-auto">
				<div class="text-center py-24 lg:py-12 text-gray-500 dark:text-slate-400">
					<BaseButton label="Toggle" color="contrast" @click="styleService.setDarkMode()" />
				</div>
			</CardBox>
		</SectionMain>
	</LayoutAuthenticated>
</template>
