import { useState, useEffect } from "react";
import { FaBars, FaSearch, FaTimes } from "react-icons/fa";

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <header
        className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
          isScrolled ? "bg-white shadow-md p-3" : "bg-white p-4"
        } flex justify-between items-center`}
      >
        <div className="flex items-center gap-4">
          <FaBars
            className="text-gray-700 text-2xl cursor-pointer"
            onClick={() => setIsSidebarOpen(true)}
          />
          <h1 className="text-blue-600 text-2xl font-bold">MitraBangsa.News</h1>
        </div>
        <div
          className={`flex items-center bg-gray-100 px-4 py-2 rounded-full transition-all duration-300 ${
            isScrolled ? "w-1/4" : "w-1/3"
          }`}
        >
          <input
            type="text"
            placeholder="Cari di MitraBangsa.News"
            className="bg-transparent w-full outline-none text-gray-700"
          />
          <FaSearch className="text-gray-500 cursor-pointer" />
        </div>
        <div className="flex gap-4">
          <button className="bg-blue-600 text-white px-4 py-2 rounded-full">Daftar</button>
          <button className="border border-blue-600 text-blue-600 px-4 py-2 rounded-full">Masuk</button>
        </div>
      </header>

      {isSidebarOpen && (
        <div className="fixed top-0 left-0 w-64 h-full bg-white shadow-lg z-50 p-4 transition-all">
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-xl font-bold">Menu</h2>
            <FaTimes
              className="text-gray-700 text-2xl cursor-pointer"
              onClick={() => setIsSidebarOpen(false)}
            />
          </div>
          <ul className="space-y-2">
            <li className="text-gray-700 cursor-pointer">Beranda</li>
            <li className="text-gray-700 cursor-pointer">Berita</li>
            <li className="text-gray-700 cursor-pointer">Internasional</li>
            <li className="text-gray-700 cursor-pointer">Hukum</li>
            <li className="text-gray-700 cursor-pointer">Kolom</li>
          </ul>
        </div>
      )}
    </>
  );
}