// import React from "react";
// import Search from "../assets/icons/search.svg";
// import Arrow from "../assets/icons/arrow.svg";
// import Vector7 from "../assets/icons/Vector7.svg";
// import Pic from "../assets/icons/pic.png";

// const Header = ({ title }) => {
//   return (
//     <header className="flex items-center gap-4 mb-6">
//       <h3 className="text-[#402E32] w-[90%] font-bold">{title}</h3>
//       <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//         <img src={Search} alt="لوگو" />
//       </div>
//       <div className="w-35 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-[#E6DBCC]">
//         <img src={Pic} className="w-10 h-10 shadow-2xl ml-1" alt="لوگو" />
//         <p className="text-[#402E32] -mt-1.5 pl-1.5">سارا راد</p>
//         <img src={Arrow} alt="لوگو" />
//       </div>
//       <img src={Vector7} alt="لوگو" />
//     </header>
//   );
// };

// export default Header;

// src/components/Header.jsx
import React from "react";
import Search from "../../../assets/icons/search.svg";
import Arrow from "../../../assets/icons/arrow.svg";
import Vector7 from "../../../assets/icons/Vector7.svg";
import Pic from "../../../assets/icons/pic.png";
import toggleTheme from "../../ToggleTheme";
import { CgDarkMode } from "react-icons/cg";

const Header = () => {
  return (
    <header className="flex items-center justify-end gap-4 p-3">
      {/* <h3 className="text-[#402E32] font-bold text-lg">{title}</h3> */}

      <div className="flex items-center gap-2">
        <div className="w-12 h-10 border-2 border-[#8B8886] flex justify-center items-center rounded-2xl bg-header2">
          <img src={Search} alt="search" />
        </div>
        <button
          onClick={toggleTheme}
          className="fixed top-16 left-2 w-12 h-10 flex justify-center items-center"
        >
          <CgDarkMode className="w-6 h-6 text-[#8B8886]" />
        </button> 
      </div>  

      <div className="flex items-center w-40 md:w-60 justify-between border-2 border-[#8B8886] rounded-2xl px-3 py-1 bg-header2">
        <img src={Pic} className="w-8 h-8 rounded-full ml-1" alt="user" />
        <p className="text-[#402E32] text-sm">سارا راد</p>
        <img src={Arrow} className="w-4 h-4 ml-1" alt="arrow" />
      </div>

      <img src={Vector7} alt="vector" />

    </header >
  );
};

export default Header;
