import { NavLink, useLocation } from 'react-router-dom';
import {
  UploadCloud,
  BarChart2,
  MessageSquare,
  GitCompare,
  Building2,
} from 'lucide-react';

const navItems = [
  { to: '/upload', label: 'Upload', icon: <UploadCloud size={18} /> },
  { to: '/report', label: 'Report', icon: <BarChart2 size={18} /> },
  { to: '/ask', label: 'Ask', icon: <MessageSquare size={18} /> },
  { to: '/compare', label: 'Compare', icon: <GitCompare size={18} /> },
  { to: '/companies', label: 'Companies', icon: <Building2 size={18} /> },
];

export function AppLayout({ children }: { children: React.ReactNode }) {
  const location = useLocation();
  return (
    <div className="app-layout">
      <aside className="sidebar">
        <div className="sidebar__brand">
          <span className="sidebar__logo">FS</span>
          <span className="sidebar__name">FinSight</span>
        </div>
        <nav className="sidebar__nav" aria-label="Main navigation">
          {navItems.map((item) => {
            const isActive = location.pathname.startsWith(item.to);
            return (
              <NavLink
                key={item.to}
                to={item.to}
                className={`sidebar__item ${isActive ? 'sidebar__item--active' : ''}`}
              >
                <span className="sidebar__icon">{item.icon}</span>
                <span className="sidebar__label">{item.label}</span>
              </NavLink>
            );
          })}
        </nav>
        <div className="sidebar__footer">
          <span className="sidebar__version">v0.1.0</span>
        </div>
      </aside>
      <main className="main-content">{children}</main>
    </div>
  );
}