"use client";

import Image from "next/image";

interface SearchWidgetProps {
  isSearchOpen: boolean;
  setIsSearchOpen: (isOpen: boolean) => void;
}

export default function SearchWidget({
  isSearchOpen,
  setIsSearchOpen,
}: SearchWidgetProps) {
  return (
    <>
      {/*  search box  */}
      <div className={`search-popup ${isSearchOpen ? "active" : ""}`.trim()}>
        <form className="search-form">
          <input type="text" placeholder="Enter Keywords..." required />
          <button type="submit" className="submit-btn">
            <Image
              src="/assets/images/icon/search.svg"
              alt="Search Icon"
              width={20}
              height={20}
            />
          </button>
        </form>
      </div>
      <div
        className={`search-overlay ${isSearchOpen ? "active" : ""}`.trim()}
        onClick={() => setIsSearchOpen(false)}
      ></div>
    </>
  );
}