import { IconBack, IconMenu } from '@lingxi/ui/icons';
import type { ReactNode } from 'react';
import { NavLink } from 'react-router';

import type { NavModule } from '@/navigation/nav-config';

export interface SideNavProps {
  module: NavModule;
  collapsed: boolean;
  onToggle: () => void;
}

export function SideNav({ module, collapsed, onToggle }: SideNavProps): ReactNode {
  return (
    <aside className="lx-sidebar" aria-label="功能导航">
      <div className="lx-sidebar__heading">
        <span className="lx-sidebar__title">{module.label}</span>
        <button
          type="button"
          className="lx-icon-button lx-sidebar__toggle"
          onClick={onToggle}
          aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
          title={collapsed ? '展开侧边栏' : '收起侧边栏'}
        >
          {collapsed ? <IconMenu size={18} /> : <IconBack size={18} />}
        </button>
      </div>

      <nav className="lx-sidebar__nav">
        {module.items.map((item) => {
          const Icon = item.icon;
          return (
            <NavLink
              key={item.key}
              to={item.path}
              end={item.path === '/'}
              className={({ isActive }) =>
                isActive ? 'lx-sidebar__item is-active' : 'lx-sidebar__item'
              }
              title={collapsed ? item.label : undefined}
            >
              <span className="lx-sidebar__item-icon">
                <Icon size={18} />
              </span>
              <span className="lx-sidebar__item-label">{item.label}</span>
            </NavLink>
          );
        })}
      </nav>

      <div className="lx-sidebar__footer">
        <span className="lx-sidebar__env" title="当前环境：本地开发">
          <span className="lx-sidebar__env-dot" aria-hidden="true" />
          <span className="lx-sidebar__env-text">本地开发</span>
        </span>
      </div>
    </aside>
  );
}