digifi-www/src/components/Header/Header.tsx

import React, { useState, ChangeEvent } from "react";
import Logo from "../../assets/icons/logo.svg";
import Button from "../shared/Button";
import { _lowerMenuItems } from "../../utils/data";
import Sidebar from "./Sidebar";
import { Link } from "react-router-dom";
import HeaderMenuItem from "./HeaderMenuItem";
import { RouteHandler } from "../../router/routes";

export type LowerMenuItem = {
  name: string;
  linkPath: string;
  subItems?: LowerMenuItem[];
};

type HiddenMenuItems = {
  hideSidebar?: boolean;
  hideMenu?: boolean;
};

const Header: React.FC<HiddenMenuItems> = ({
  hideSidebar = false,
  hideMenu = false,
}) => {
  const [searchValue, setSearchValue] = useState<string>("");
  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };

  const toggleSidebar = () => {
    setIsSidebarOpen((prev) => !prev);
  };

  return (
    <div className="relative mt-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
      {!hideSidebar && (
        <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
      )}

      <div className="containerMode flex justify-between gap-1 xl:gap-8">
        <Link to="/">
          <img
            src={Logo}
            alt="Logo"
            className="w-[90px] h-[90px] xl:w-[117px] xl:h-[117px]"
          />
        </Link>

        {!hideMenu && (
          <div className="flex flex-col-reverse lg:flex-col grow lg:grow-0 justify-between items-end">
            <ul className="flex gap-0 lg:gap-[10px] items-center justify-end w-full flex-wrap">
              {[
                { text: "Open An Account", href: RouteHandler.getStarted },
                {
                  text: "Internet Banking",
                  href: RouteHandler.businessBanking,
                },
                { text: "Contact Us", href: RouteHandler.cooperateBanking },
              ].map((item: { text: string; href: string }) => (
                <li key={item.text} className="hidden sm:flex">
                  <a href={item.href}>
                    <Button
                      className={
                        item.text === "Open An Account" ? "btn-active" : ""
                      }
                      text={item.text}
                    />
                  </a>
                </li>
              ))}
              <li className="w-full lg:w-fit">
                <SearchInput
                  onChange={handleSearchChange}
                  value={searchValue}
                />
              </li>
            </ul>

            <div className="flex lg:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1"
                strokeLinecap="round"
                strokeLinejoin="round"
                onClick={toggleSidebar}
                className="w-6 h-6 stroke-[#A6368C]"
              >
                <path
                  fillRule="evenodd"
                  d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <ul className="hidden lg:flex gap-[10px] items-center justify-end flex-wrap relative">
              {_lowerMenuItems.map((item: LowerMenuItem, idx: number) => (
                <HeaderMenuItem key={idx} item={item} />
              ))}
            </ul>
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;

const SearchInput = ({
  value,
  onChange,
}: {
  value: string;
  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
}) => {
  return (
    <div className="flex items-center border border-[#5A2C82] overflow-hidden w-full">
      <input
        type="text"
        value={value}
        onChange={onChange}
        className="py-[6px] px-[12px] w-full outline-none text-[#333] text-sm"
        placeholder="Search..."
      />
      <button
        type="button"
        className="flex items-center justify-center bg-transparent text-[#5A2C82] py-[4px] px-[12px]"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
          />
        </svg>
      </button>
    </div>
  );
};