import React from 'react';
import { NavLink } from 'react-router-dom';
import { User, Calendar, GraduationCap, MessageSquare, Settings } from 'lucide-react';

const navItems = [
  { path: '/profile', label: 'Profile', icon: User },
  { path: '/schedule', label: 'Schedule', icon: Calendar },
  { path: '/grades', label: 'Grades', icon: GraduationCap },
  { path: '/messages', label: 'Messages', icon: MessageSquare },
  { path: '/settings', label: 'Settings', icon: Settings },
];

export const Navigation: React.FC = () => {
  return (
    <>
      <nav className="navigation-rail">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '12px' }}>
          {navItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
            >
              <div className="nav-item-icon-wrapper">
                <item.icon size={24} />
              </div>
              <span className="nav-item-label">{item.label}</span>
            </NavLink>
          ))}
        </div>
      </nav>

      <nav className="navigation-bar">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
          >
            <div className="nav-item-icon-wrapper">
              <item.icon size={24} />
            </div>
            <span className="nav-item-label">{item.label}</span>
          </NavLink>
        ))}
      </nav>
    </>
  );
};