import { NavLink } from 'react-router-dom'
import { NAV_GROUPS } from '../../layouts/shell/navConfig'
import { usePermission } from '../../hooks/usePermission'

interface SlideOutNavProps {
  open: boolean
  onClose: () => void
}

export function SlideOutNav({ open, onClose }: SlideOutNavProps) {
  const { can } = usePermission()

  return (
    <>
      <div className={`mob-sidebar-backdrop ${open ? 'mob-show' : ''}`} onClick={onClose} />
      <nav className={`mob-sidebar ${open ? 'mob-open' : ''}`} aria-label="Main navigation">
        <div className="mob-sidebar-header">
          <span className="mob-sidebar-title">webappAIO</span>
          <button className="mob-sidebar-close" onClick={onClose} aria-label="Close menu">
            ✕
          </button>
        </div>

        {NAV_GROUPS.map((group) => {
          const items = group.items.filter((item) => !item.permission || can(item.permission))
          if (items.length === 0) return null

          return (
            <div key={group.header}>
              <div className="mob-sidebar-section-label">{group.header}</div>
              {items.map((item) => (
                <NavLink
                  key={item.to}
                  to={item.to}
                  onClick={onClose}
                  className={({ isActive }) => `mob-sidebar-link ${isActive ? 'mob-active' : ''}`}
                >
                  <span className={`mob-nav-icon bi ${item.icon}`}></span>
                  {item.label}
                </NavLink>
              ))}
            </div>
          )
        })}
      </nav>
    </>
  )
}