import React from 'react';
import { NavLink } from 'react-router-dom';
import { NavSection } from '../types';
import { LibraryIcon } from './Icons';

interface SidebarProps {
  navLinks: NavSection[];
}

export const Sidebar: React.FC<SidebarProps> = ({ navLinks }) => {
  return (
    <aside className="w-64 bg-gray-800 p-4 space-y-6 overflow-y-auto shadow-lg">
      <div className="flex items-center space-x-3 mb-6">
        <LibraryIcon className="h-10 w-10 text-purple-400" />
        <h1 className="text-2xl font-bold text-white">Chemical Docs</h1>
      </div>
      {navLinks.map((section) => (
        <div key={section.title}>
          <h2 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2 px-2">{section.title}</h2>
          <nav className="space-y-1">
            {section.links.map((link) => {
              const IconComponent = link.icon;
              return (
                <NavLink
                  key={link.path}
                  to={link.path}
                  className={({ isActive }) =>
                    `flex items-center space-x-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors duration-150 ease-in-out
                    ${isActive
                      ? 'bg-purple-600 text-white shadow-md'
                      : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                    }`
                  }
                >
                  {IconComponent && <IconComponent className="h-5 w-5" />}
                  <span>{link.label}</span>
                </NavLink>
              );
            })}
          </nav>
        </div>
      ))}
    </aside>
  );
};