import { History, Settings, ChevronRight, Code, Layout, Sparkles } from 'lucide-react';

const menuItems = [
  { icon: Sparkles, label: 'New Generation', active: true },
  { icon: History, label: 'History', active: false },
  { icon: Code, label: 'API Keys', active: false },
  { icon: Layout, label: 'Templates', active: false },
  { icon: Settings, label: 'Settings', active: false },
];

export default function Sidebar() {
  return (
    <div className="w-64 border-r border-gray-800/50 bg-black/20 hidden md:flex flex-col h-full fixed left-0 top-16 pt-4">
      <div className="px-4 mb-6">
        <button className="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-all shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2">
          <Sparkles className="w-4 h-4" />
          Start Generating
        </button>
      </div>

      <nav className="flex-1 px-2 space-y-1">
        {menuItems.map((item, index) => (
          <a
            key={index}
            href="#"
            className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
              item.active 
                ? 'bg-gray-800/50 text-white border border-gray-700/50' 
                : 'text-gray-400 hover:text-white hover:bg-gray-800/30'
            }`}
          >
            <item.icon className="w-4 h-4" />
            {item.label}
            {item.active && <ChevronRight className="w-4 h-4 ml-auto opacity-50" />}
          </a>
        ))}
      </nav>

      <div className="p-4 border-t border-gray-800/50">
        <div className="p-3 rounded-lg bg-gradient-to-br from-gray-900 to-black border border-gray-800">
          <h4 className="text-xs font-semibold text-gray-300 mb-1">Storage Usage</h4>
          <div className="w-full bg-gray-800 rounded-full h-2 mt-2">
            <div className="bg-indigo-500 h-2 rounded-full w-[45%]" />
          </div>
          <p className="text-xs text-gray-500 mt-2">45% of 10GB used</p>
        </div>
      </div>
    </div>
  );
}