// @ts-nocheck
import { Header } from "@/components/Header"
import { ThemeProvider } from "@/context/ThemeProvider"
import { useTheme } from "@/context/ThemeProvider"

const MainTemplate = (props) => {
	return (
		<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
			<MainContent>{props.children}</MainContent>
		</ThemeProvider>
	)
}

const MainContent = ({ children }) => {
	const { theme } = useTheme()
	const classes =
		theme === "light"
			? "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"
			: "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"

	return (
		<div className={classes}>
			<Header />
			<main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-16">
				<div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-4 py-3">
					{children}
				</div>
			</main>
		</div>
	)
}
export default MainTemplate