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";
import { Paper } from "./components/Paper";
import { AssistChip, InputChip } from "./components/Chip";
import { Dialog, DialogActions, DialogContent, DialogTitle } from "./components/Dialog";
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'>
			<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>
			<Paper display="flex" gap='18px' justifyContent="center" alignItems="center">
				<Typography variant='h6'>Hello</Typography>
				<Switch />
			</Paper>
			<AssistChip label="Hello" />
			<InputChip label="Hello" />
			<Dialog open={true}>
				<DialogTitle>Hello</DialogTitle>
				<DialogContent>Hello</DialogContent>
				<DialogActions>
					<Button variant='filled'>Hello</Button>
				</DialogActions>
			</Dialog>
		</ThemeProvider>
	);
};
mountApp();