components/Sidebar.js

import { Inbox, Star, Clock, Send, File, Archive, Trash2, Tag } from 'lucide-react';

export default function Sidebar({ activeFilter, setActiveFilter }) {
  const menuItems = [
    { id: 'All', icon: Inbox, label: 'Inbox', count: 12 },
    { id: 'Starred', icon: Star, label: 'Starred', count: 3 },
    { id: 'Snoozed', icon: Clock, label: 'Snoozed', count: 0 },
    { id: 'Sent', icon: Send, label: 'Sent', count: 150 },
    { id: 'Drafts', icon: File, label: 'Drafts', count: 2 },
  ];

  const labels = [
    { id: 'Work', icon: Tag, color: 'bg-blue-500' },
    { id: 'Finance', icon: Tag, color: 'bg-green-500' },
    { id: 'Social', icon: Tag, color: 'bg-purple-500' },
    { id: 'Promotions', icon: Tag, color: 'bg-yellow-500' },
  ];

  return (
    <aside className="w-64 bg-slate-50 border-r border-slate-200 flex flex-col shrink-0">
      <div className="p-4">
        <button className="flex items-center gap-3 px-6 py-4 bg-white shadow-md hover:shadow-lg transition-shadow rounded-2xl text-slate-700 font-medium border border-slate-100">
          <Plus size={20} className="text-gmail-blue" />
          Compose
        </button>
      </div>

      <nav className="flex-1 px-3 space-y-1 overflow-y-auto">
        <div className="mb-4">
          <p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Mailbox</p>
          {menuItems.map((item) => (
            <button 
              key={item.id}
              onClick={() => setActiveFilter(item.id)}
              className={`w-full flex items-center justify-between px-3 py-2 rounded-r-full transition-colors text-sm ${
                activeFilter === item.id 
                ? 'bg-blue-100 text-blue-700 font-semibold' 
                : 'text-slate-600 hover:bg-slate-200'
              }`}
            >
              <div className="flex items-center gap-3">
                <item.icon size={18} />
                <span>{item.label}</span>
              </div>
              {item.count > 0 && <span className="text-xs font-medium">{item.count}</span>}
            </button>
          ))}
        </div>

        <div>
          <p className="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Labels</p>
          {labels.map((label) => (
            <button 
              key={label.id}
              onClick={() => setActiveFilter(label.id)}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded-r-full transition-colors text-sm ${
                activeFilter === label.id 
                ? 'bg-blue-100 text-blue-700 font-semibold' 
                : 'text-slate-600 hover:bg-slate-200'
              }`}
            >
              <label.icon size={18} className={label.color.replace('bg-', 'text-')} />
              <span>{label.id}</span>
            </button>
          ))}
        </div>
      </nav>

      <div className="p-4 border-t border-slate-200">
        <a 
          href="https://huggingface.co/spaces/akhaliq/anycoder" 
          target="_blank" 
          rel="noopener noreferrer"
          className="block text-center text-xs text-slate-400 hover:text-gmail-blue transition-colors py-2"
        >
          Built with anycoder
        </a>
      </div>
    </aside>
  );
}