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";
import { IconButton } from "./components/IconButton";
import { BrandedFAB } from "./components/FloatingActionButton";
import { List, ListItem } from "./components/List";
import { Radio } from "./components/RadioButton";
import { Slider } from "./components/Slider";
import { Tabs, Tab } from "./components/Tabs";
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'>
			<Tabs>
				<Tab>Tab 1</Tab>
				<Tab>Tab 2</Tab>
				<Tab>Tab 3</Tab>
			</Tabs>
		</ThemeProvider>
	);
};
mountApp();