import React from 'react';
import { 
  HomeIcon, 
  BookmarkIcon, 
  ClockIcon, 
  ArrowDownTrayIcon, 
  Cog6ToothIcon, 
  ChatBubbleLeftRightIcon,
  PlusIcon
} from '@heroicons/react/24/outline';

const Sidebar = ({ 
  currentPage, 
  setCurrentPage, 
  showAIAssistant, 
  setShowAIAssistant, 
  setShowSettings,
  addTab
}) => {
  const menuItems = [
    { id: 'home', label: 'Home', icon: HomeIcon },
    { id: 'bookmarks', label: 'Bookmarks', icon: BookmarkIcon },
    { id: 'history', label: 'History', icon: ClockIcon },
    { id: 'downloads', label: 'Downloads', icon: ArrowDownTrayIcon },
    { id: 'settings', label: 'Settings', icon: Cog6ToothIcon }
  ];

  return (
    <div className="w-16 bg-gray-800 flex flex-col items-center py-4 space-y-6">
      <div className="p-2 rounded-lg bg-indigo-600 mb-2">
        <PlusIcon className="h-6 w-6 text-white" onClick={addTab} />
      </div>
      
      {menuItems.map((item) => (
        <button
          key={item.id}
          onClick={() => {
            if (item.id === 'settings') {
              setShowSettings(true);
            } else {
              setCurrentPage(item.id);
            }
          }}
          className={`p-2 rounded-lg transition-colors ${
            currentPage === item.id ? 'bg-gray-700' : 'hover:bg-gray-700'
          }`}
        >
          <item.icon className="h-6 w-6 text-gray-300" />
        </button>
      ))}
      
      <div className="mt-auto">
        <button
          onClick={() => setShowAIAssistant(!showAIAssistant)}
          className={`p-2 rounded-lg transition-colors ${
            showAIAssistant ? 'bg-indigo-600' : 'hover:bg-gray-700'
          }`}
        >
          <ChatBubbleLeftRightIcon className="h-6 w-6 text-gray-300" />
        </button>
      </div>
    </div>
  );
};

export default Sidebar;