import React from 'react';
import { FaTwitter, FaHome, FaHashtag, FaEnvelope, FaBookmark, FaUser, FaPlusCircle } from 'react-icons/fa';

const NavItem = ({ icon, text, active, onClick }) => (
  <div 
    onClick={onClick}
    className={`flex items-center gap-4 p-3 rounded-full cursor-pointer transition-colors ${active ? 'font-bold' : 'hover:bg-gray-900'}`}
  >
    <span className="text-2xl">{icon}</span>
    <span className="text-xl hidden xl:block">{text}</span>
  </div>
);

const Sidebar = ({ onOpenUpload }) => {
  return (
    <div className="w-20 xl:w-64 p-4 flex flex-col justify-between h-screen sticky top-0">
      <div className="space-y-4">
        <div className="p-3 text-3xl w-fit rounded-full hover:bg-gray-900 cursor-pointer">
           {/* Logo placeholder - using generic shape */}
           <div className="w-8 h-8 bg-white text-black flex items-center justify-center font-bold rounded-sm">X</div>
        </div>
        
        <nav className="space-y-2">
          <NavItem icon={<FaHome />} text="Home" active />
          <NavItem icon={<FaHashtag />} text="Explore" />
          <NavItem icon={<FaBookmark />} text="Saved Reports" />
          <NavItem icon={<FaUser />} text="Profile" />
        </nav>

        <button 
          onClick={onOpenUpload}
          className="w-full bg-blue-500 text-white font-bold py-3 rounded-full mt-4 hover:bg-blue-600 transition shadow-lg flex justify-center items-center gap-2"
        >
          <FaPlusCircle /> <span className="hidden xl:block">Upload MT5</span>
        </button>
      </div>

      <div className="flex items-center gap-3 p-3 rounded-full hover:bg-gray-900 cursor-pointer">
        <div className="w-10 h-10 bg-gray-700 rounded-full"></div>
        <div className="hidden xl:block">
          <p className="font-bold">Trader User</p>
          <p className="text-gray-500">@trader_1</p>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;