'use client'

import type { ReactNode } from 'react'
import { Footer, type FooterProps } from '../Footer'
import type { DarkModeToggleProps } from '../ThemeToggle'
import {
  VerticalNavBar,
  type VerticalNavBarProps as NavBarProps,
} from './VerticalNavBar'
import { CollapseContextProvider } from './VerticalNavBar/context'

type Props = {
  navBar: NavBarProps
  header?: ReactNode
  newsletter?: ReactNode
  footer?: FooterProps
  darkModeToggle?: DarkModeToggleProps
}

export function Shell({
  newsletter,
  navBar,
  header,
  footer,
  children,
  darkModeToggle,
}: React.PropsWithChildren<Props>) {
  return (
    <CollapseContextProvider>
      <VerticalNavBar {...navBar} darkModeToggle={darkModeToggle} />
      <div className="flex min-h-screen flex-col md:pl-[73px]">
        {header}
        {children}
        {newsletter}
        <Footer {...footer} />
      </div>
    </CollapseContextProvider>
  )
}