import { Outlet } from 'react-router-dom';
import { useState } from 'react';
import { MdAssignmentTurnedIn, MdDashboard, MdFolderShared, MdHealthAndSafety, MdSupportAgent } from 'react-icons/md';
import SidebarNavigation from './SidebarNavigation';
import TopBar from './TopBar';

const memberNavItems = [
  { path: '/portal/overview', label: 'Overview', icon: <MdDashboard /> },
  { path: '/portal/access', label: 'Access & Requests', icon: <MdAssignmentTurnedIn /> },
  { path: '/portal/documents', label: 'Documents & Reporting', icon: <MdFolderShared /> },
  { path: '/portal/status', label: 'Status & Support', icon: <MdHealthAndSafety /> },
  { path: '/portal/support', label: 'Support Channels', icon: <MdSupportAgent /> },
];

export default function MemberPortalLayout() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
  const handleToggleSidebar = () => setSidebarCollapsed((current) => !current);

  return (
    <div className="layout">
      <SidebarNavigation
        items={memberNavItems}
        collapsed={sidebarCollapsed}
        onToggle={handleToggleSidebar}
      />
      <div className="layout__main">
        <TopBar sidebarCollapsed={sidebarCollapsed} onToggleSidebar={handleToggleSidebar} />
        <main id="main-content" className="layout__content" role="main">
          <Outlet />
        </main>
      </div>
    </div>
  );
}
