import { NavLink, type NavLinkRenderProps } from 'react-router-dom';
import { LayoutDashboard, List, BarChart3, Activity } from 'lucide-react';
import { useTranslation } from 'react-i18next';

const navItems = [
  { to: '/', label: 'Dashboard', icon: LayoutDashboard, tourId: 'dashboard-nav' },
  { to: '/scenarios', label: 'Scenarios', icon: List, tourId: 'scenarios-nav' },
  { to: '/compare', label: 'Compare', icon: BarChart3, tourId: 'compare-nav' },
  { to: '/analytics', label: 'Analytics', icon: Activity, tourId: 'analytics-nav' },
];

export function Sidebar() {
  const { t } = useTranslation();

  const getClassName = ({ isActive }: NavLinkRenderProps) =>
    `flex items-center gap-3 px-4 py-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
      isActive
        ? 'bg-primary text-primary-foreground'
        : 'hover:bg-muted'
    }`;

  return (
    <aside 
      className="w-64 border-r bg-card min-h-[calc(100vh-4rem)] hidden md:block"
      role="navigation"
      aria-label="Main navigation"
    >
      <nav className="p-4 space-y-2">
        {navItems.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            data-tour={item.tourId}
            className={getClassName}
          >
            <item.icon className="h-5 w-5" aria-hidden="true" />
            {t(`navigation.${item.label.toLowerCase()}`)}
          </NavLink>
        ))}
      </nav>
    </aside>
  );
}
