import { type ReactNode } from 'react'

import { Typography } from '@/components/atoms'

import { Header, Sidebar } from '@/components/molecules'

import { SidebarProvider } from '@/providers'

import {
	contentWrapperStyles,
	headerBackdropStyles,
	pageWrapperStyles,
	sidebarWrapperStyles
} from './DefaultLayout.styles'

const { Title } = Typography

type DefaultLayoutProps = {
	title: string
	children: ReactNode
}

export function DefaultLayout({ title, children }: DefaultLayoutProps) {
	return (
		<div className={sidebarWrapperStyles}>
			<SidebarProvider>
				<Sidebar />
				<div className={pageWrapperStyles}>
					<Header />
					<div className={contentWrapperStyles}>
						<div className={headerBackdropStyles}></div>
						<Title level={4} className='mb-6.5'>
							{title}
						</Title>
						{children}
					</div>
				</div>
			</SidebarProvider>
		</div>
	)
}
