import { Outlet, NavLink } from 'react-router-dom'
import { useAuth } from '../core/auth/AuthContext'

export default function Layout() {
  const { user, logout } = useAuth()

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <nav style={{ width: 220, borderRight: '1px solid #eee', padding: 16 }}>
        <h2>Control Center</h2>
        <ul style={{ listStyle: 'none', padding: 0 }}>
          <li><NavLink to="/dashboard">Dashboard</NavLink></li>
          <li><NavLink to="/mitras">Mitra</NavLink></li>
          <li><NavLink to="/sessions">Sesi</NavLink></li>
          <li><NavLink to="/users">Users</NavLink></li>
          <li><NavLink to="/mitra-activity">Aktivitas Mitra</NavLink></li>
          <li><NavLink to="/settings">Settings</NavLink></li>
        </ul>
        <div style={{ marginTop: 'auto', paddingTop: 16 }}>
          <p style={{ fontSize: 12 }}>{user?.email}</p>
          <button onClick={logout}>Logout</button>
        </div>
      </nav>
      <main style={{ flex: 1, padding: 24 }}>
        <Outlet />
      </main>
    </div>
  )
}