import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import { createTheme } from './utils/theme';
import { ThemeProvider } from './hooks/useTheme';
import { Button } from './components/Button';
import { Box } from "./components/Box";
import { Checkbox } from "./components/Checkbox";
import { Switch } from "./components/Switch";
import { Typography } from "./components/Typography";
import { FormLabel } from "./components/Forms";
const mountApp = async () => {
	const rootContainer = document.getElementById('root');

	if (rootContainer === null) {
		console.error('Root container element not found!');
		return;
	}

	const theme = createTheme('#e22216');

	const root = createRoot(rootContainer);
	root.render(
		<ThemeProvider theme={theme} scheme='dark'>
			<Box
				flexDirection="column"
				style={{
					width: '100%',
					height: '100vh',
					backgroundColor: 'var(--md-sys-color-background)',
				}}
			>
				<Typography variant='h1'>Hello</Typography>
				<Button onClick={() => alert('Hello')} variant='filled'>Hello</Button>
				<Checkbox />
				<Switch />
				<Typography variant='p'>Hello</Typography>
				<FormLabel>
					<Switch /> 
					<Typography variant='h6'>Hello</Typography>
				</FormLabel>
			</Box>
		</ThemeProvider>
	);
};
mountApp();