// SCB Admin Layout
import { Outlet } from 'react-router-dom';
import { useState } from 'react';
import { 
  MdDashboard, 
  MdBusiness, 
  MdAccountBalanceWallet,
  MdRoute,
  MdSecurity,
  MdExtension,
  MdAdminPanelSettings
} from 'react-icons/md';
import SidebarNavigation from './SidebarNavigation';
import TopBar from './TopBar';
import { AdminPermission } from '@/constants/permissions';
import './SCBLayout.css';

const scbNavItems = [
  { path: '/scb/overview', label: 'Overview', icon: <MdDashboard />, permission: AdminPermission.VIEW_SCB_OVERVIEW },
  { path: '/scb/fi-management', label: 'FI Management & Nostro/Vostro', icon: <MdBusiness />, permission: AdminPermission.VIEW_FI_MANAGEMENT },
  { path: '/scb/cbdc-gru', label: 'CBDC & GRU Controls', icon: <MdAccountBalanceWallet /> },
  { path: '/scb/corridors', label: 'Corridor & FX Policy', icon: <MdRoute />, permission: AdminPermission.VIEW_CORRIDOR_POLICY },
  { path: '/scb/risk-compliance', label: 'Risk & Compliance', icon: <MdSecurity /> },
  { path: '/scb/tech', label: 'Tech / API & Plugins', icon: <MdExtension /> },
  { path: '/scb/security', label: 'Security, Users & Roles', icon: <MdAdminPanelSettings /> },
];

export default function SCBLayout() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

  return (
    <div className="layout">
      <SidebarNavigation 
        items={scbNavItems} 
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
      />
      <div className="layout__main">
        <TopBar />
        <main className="layout__content">
          <Outlet />
        </main>
      </div>
    </div>
  );
}