import React from 'react';
import { Activity, MessageSquare, Pill } from 'lucide-react';

interface SidebarProps {
activeTab: 'dashboard' | 'chat' | 'medication';
setActiveTab: (tab: 'dashboard' | 'chat' | 'medication') => void;
}

const Sidebar: React.FC<SidebarProps> = ({ activeTab, setActiveTab }) => {
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: Activity },
{ id: 'chat', label: 'AI Companion', icon: MessageSquare },
{ id: 'medication', label: 'Meds & Rewards', icon: Pill },
] as const;

return (
<aside className="hidden md:flex flex-col w-64 h-screen fixed glass-panel border-r border-neon-border z-20 top-0 left-0">
<div className="p-8">
<h1 className="text-2xl font-mono font-bold text-white tracking-tighter flex items-center gap-3">
<div className="p-2 bg-neon-green/10 rounded-lg">
<Activity className="text-neon-green" size={24} />
</div>
SomAI
</h1>
<p className="text-xs text-gray-400 mt-3 font-medium tracking-wide">CLINICAL COMPANION v2.0</p>
</div>
<nav className="flex-1 px-4 space-y-2 mt-4">
    {navItems.map((item) => (
      <button 
        key={item.id}
        onClick={() => setActiveTab(item.id)}
        className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 group ${
          activeTab === item.id 
            ? 'bg-white/10 text-white border border-white/10 shadow-lg shadow-black/20' 
            : 'text-gray-400 hover:bg-white/5 hover:text-white'
        }`}
      >
        <item.icon 
          size={20} 
          className={`transition-colors ${activeTab === item.id ? 'text-neon-green' : 'text-gray-500 group-hover:text-gray-300'}`} 
        /> 
        <span className="font-medium text-sm">{item.label}</span>
      </button>
    ))}
  </nav>
  <div className="p-6 border-t border-white/5">
    <div className="flex items-center gap-3 text-xs text-gray-500 font-mono">
      <div className="w-2 h-2 rounded-full bg-neon-green animate-pulse-slow"></div>
      SYSTEM ONLINE
    </div>
  </div>
</aside>
);
};

export default Sidebar;