import { SettingsIcon } from 'lucide-react';
import Lable from './components/lable';
import routes from '@/routes/sideBar';
import useUser from '@/hooks/useUser';

function SideBar() {
  // const user = 
    // {
      // role: 'super_admin',
      // role: 'admin',
      // role: 'inst_admin',
      // role: 'school',
      // role: 'teacher',
      // role: 'inst_designer',
    // }
  const { user } = useUser();
  return (
    <div className="h-full bg-slate-50 border-r min-w-[240px]">
      <div
        className="flex flex-col justify-between fixed px-4 py-10  bottom-0 "
        style={{ height: 'calc(100vh - 80px)' }}
      >
        <div className="flex flex-col gap-2">
          {routes.map((route) => {
            if (!route.roles.includes(user?.role ?? '')) return;
            return (
              <Lable
                key={route.path}
                icon={route.icon}
                pageName={route.name}
                to={route.path}
              />
            );
          })}
        </div>
        <div className="pt-4 border-t-2">
          <Lable
            icon={<SettingsIcon />}
            pageName="Settings"
            to="/dashboard/settings"
          />
        </div>
      </div>
    </div>
  );
}

export default SideBar;

// import { SettingsIcon } from 'lucide-react';
// import Lable from './components/lable';
// import routes from '@/routes/sideBar';
// import useUser from '@/hooks/useUser';

// function SideBar() {
//   const { user } = useUser();
//   const isAdmin = user?.role === 'admin';
//   const isInstAdmin = user?.role === 'inst_admin';
//   const isSchool = user?.role === 'school';
//   const isTeacher = user?.role === 'teacher';
//   const isInstDesign =
//     user?.role === 'inst_designer' || user?.role === 'super_admin';
//   return (
//     <div className="h-full bg-slate-50 border-r min-w-[240px]">
//       <div
//         className="flex flex-col justify-between px-4 py-10 fixed bottom-0"
//         style={{ height: 'calc(100vh - 80px)' }}
//       >
//         <div className="flex flex-col gap-2">
//           {routes.map((route) => {
//             if (isAdmin && route.name === 'Teachers') return;
//             if (
//               isSchool &&
//               (route.name === 'Market-Courses' ||
//                 route.name === 'Orders' ||
//                 route.name === 'Meetings' ||
//                 route.name === 'Accounts')
//             )
//               return;
//             if (
//               isTeacher &&
//               (route.name === 'Market-Courses' ||
//                 route.name === 'Orders' ||
//                 route.name === 'Meetings' ||
//                 route.name === 'Accounts' ||
//                 route.name === 'Teachers')
//             )
//               return;
//             if (
//               isInstDesign &&
//               (route.name === 'Market-Courses' ||
//                 route.name === 'Orders' ||
//                 route.name === 'Meetings' ||
//                 route.name === 'Accounts' ||
//                 route.name === 'Teachers' ||
//                 route.name === 'Courses')
//             )
//               return;
//             return (
//               <Lable
//                 key={route.path}
//                 icon={route.icon}
//                 pageName={route.name}
//                 to={route.path}
//               />
//             );
//           })}
//         </div>
//         <div className="pt-4 border-t-2">
//           <Lable
//             icon={<SettingsIcon />}
//             pageName="Settings"
//             to="/dashboard/settings"
//           />
//         </div>
//       </div>
//     </div>
//   );
// }

// export default SideBar;