import React from "react";
import { FaTimes, FaComments, FaUser } from "react-icons/fa";

export default function Sidebar({ isOpen, onClose, activeTab, setActiveTab }) {
  return (
    <div
      className={`fixed inset-0 z-20 md:relative md:translate-x-0 transform ${
        isOpen ? "translate-x-0" : "-translate-x-full"
      } transition-transform duration-300 bg-white/95 backdrop-blur-lg shadow-lg md:flex md:flex-col w-64`}
    >
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <h2 className="font-semibold text-lg text-gray-800 tracking-tight">Menu</h2>
        <button
          className="md:hidden p-2 rounded-full hover:bg-gray-100 transition"
          onClick={onClose}
        >
          <FaTimes size={18} className="text-gray-600" />
        </button>
      </div>

      <nav className="flex-1 flex flex-col p-4 space-y-2">
        <button
          className={`flex items-center px-3 py-2 rounded-lg transition-colors ${
            activeTab === "chat" ? "bg-blue-100 text-blue-600" : "text-gray-600 hover:bg-blue-50 hover:text-blue-600"
          }`}
          onClick={() => setActiveTab("chat")}
        >
          <FaComments className="mr-2" /> Assistante
        </button>

        <button
          className={`flex items-center px-3 py-2 rounded-lg transition-colors ${
            activeTab === "avatar" ? "bg-indigo-100 text-indigo-600" : "text-gray-600 hover:bg-indigo-50 hover:text-indigo-600"
          }`}
          onClick={() => setActiveTab("avatar")}
        >
          <FaUser className="mr-2" /> Avatar
        </button>

        <button
          className="flex items-center px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition mt-auto"
        >
          ⚙ Paramètres
        </button>
      </nav>
    </div>
  );
}