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

interface MobileSearchBarProps {
  searchQuery: string;
  onSearchChange: (value: string) => void;
  isFilterExpanded: boolean;
  onFilterToggle: () => void;
}

const MobileSearchBar = ({
  searchQuery,
  onSearchChange,
  isFilterExpanded,
  onFilterToggle,
}: MobileSearchBarProps) => {
  return (
    <div className="relative flex items-center gap-2 xl:hidden mb-4">
      {/* Search Icon */}
      <img
        src="/icons/search.svg"
        alt="Search"
        className="absolute left-2 h-4 w-4 text-[#888888] z-10"
      />

      {/* Search Input */}
      <input
        type="text"
        placeholder="Search by project name"
        value={searchQuery}
        onChange={(e) => onSearchChange(e.target.value)}
        className="w-full border-b border-[#E8E8E8] pl-10 pr-20 lg:pr-24 py-2.5 text-base text-[#28241E] leading-snug tracking-wider placeholder:text-[14px] placeholder-[#888888] focus:outline-none focus:border-[#d3d3d3] font-creato bg-transparent"
      />

      {/* Filter Button - Mobile: absolute right */}
      <button
        type="button"
        onClick={onFilterToggle}
        className="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 cursor-pointer"
      >
        {/* 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>
  );
};

export default MobileSearchBar;