/* eslint-disable @next/next/no-img-element */
"use client";

interface PropertySearchBarProps {
  isFilterExpanded: boolean;
  onFilterToggle: () => void;
}

const PropertySearchBar = ({
  isFilterExpanded,
  onFilterToggle,
}: PropertySearchBarProps) => {
  return (
    <div className="w-full">
      <div className="relative flex items-center gap-2">
        {/* Search Icon */}
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/icons/search.svg"
          alt="Search"
          className="absolute left-2 h-4 w-4 text-[#888888] z-10"
        />

        {/* Input */}
        <input
          type="text"
          placeholder="Search by project name"
          className="w-full border-b border-[#E8E8E8] pl-10 pr-20 lg:pr-3 py-2.5 text-base text-[#28241E] md:text-[#28241E] leading-snug tracking-wider placeholder-[#888888] focus:outline-none focus:border-[#d3d3d3] font-creato"
        />

        {/* Filter Button - Mobile Only */}
        <button
          type="button"
          onClick={onFilterToggle}
          className="lg:hidden absolute right-0 flex items-center gap-3 md:gap-4 px-2 py-1.5 text-gray-600 hover:text-gray-900 transition-colors"
        >
          {/* Filter Icon - Image */}
          <img
            src="/images/search/icons/filter_icon.png"
            alt="Filter"
            className="w-4 h-4 brightness-[0.5]"
          />
          {/* Filter Text */}
          <span className="font-creato text-[14px] tracking-wider">Filter</span>
        </button>
      </div>
    </div>
  );
};

export default PropertySearchBar;