import { Outlet } from 'react-router-dom'
import { KycBanner, ProfileMenu } from '@widgets/profile'
import styles from './ProfilePage.module.css'

// Profile dashboard layout. The outer WalletLayout (see RouterProvider) renders
// the header/footer; here we split into a ~25% menu column and a ~75% content
// column. The active item is rendered into the inner <Outlet/>.
export function ProfilePage() {
  return (
    <div className={styles.page}>
      <div className={styles.menu}>
        <ProfileMenu />
      </div>
      <main className={styles.content}>
        <KycBanner />
        <Outlet />
      </main>
    </div>
  )
}
