import { Outlet } from 'react-router-dom'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
import styles from './PageLayout.module.css'

export function PageLayout() {
  return (
    <div className={styles.layout}>
      <div className={styles.bgOrbs} aria-hidden="true">
        <div className={styles.orb1} />
        <div className={styles.orb2} />
        <div className={styles.orb3} />
        <div className={styles.orb4} />
      </div>

      <Sidebar />

      <div className={styles.main}>
        <Header />
        <Outlet />
      </div>
    </div>
  )
}
