import React, { useState } from "react";

const Header = () => {
  const [isSearchVisible, setIsSearchVisible] = useState(false);

  const toggleSearchVisibility = () => {
    setIsSearchVisible(!isSearchVisible);
  };

  return (
    <header className="bg-white shadow">
      <div className="container mx-auto px-4 py-6 flex justify-between items-center">
        <h1 className="text-4xl font-medium">headlines</h1>
        <nav className="space-x-4 flex items-center">
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            World
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Local{" "}
            <span className="text-sm bg-yellow-300 text-yellow-800 rounded-full px-2 py-1">
              Beta
            </span>
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Business
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Tech
          </a>
          <a
            href="#"
            className="text-lg font-medium text-gray-700 hover:text-gray-900"
          >
            Culture
          </a>
          <button
            className="text-gray-700 hover:text-gray-900 ml-4"
            onClick={toggleSearchVisibility}
            aria-label="Search"
          >
            🔍
          </button>
          {isSearchVisible && (
            <input
              type="text"
              placeholder="Search..."
              className="ml-4 p-2 border border-gray-300 rounded-md"
            />
          )}
        </nav>
      </div>
    </header>
  );
};

export default Header;