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

interface DesktopSearchBarProps {
  searchQuery: string;
  onSearchChange: (value: string) => void;
  onFilterToggle: () => void;
}

const DesktopSearchBar = ({
  searchQuery,
  onSearchChange,
  onFilterToggle,
}: DesktopSearchBarProps) => {
  return (
    <div className="hidden xl:block w-full">
      <div className="flex items-center gap-0 bg-white/20 backdrop-blur-sm overflow-hidden relative w-full z-10">
        {/* Search Icon */}
        <img
          src="/icons/search.svg"
          alt="Search"
          className="absolute left-3 h-5 w-5 z-10 pointer-events-none brightness-0 invert"
        />

        {/* Search Input */}
        <input
          type="text"
          placeholder="Search by Project Name"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="flex-1 pl-12 pr-4 py-4 text-[18px] text-white leading-snug tracking-wider placeholder-white placeholder:text-[16px] placeholder:font-light  caret-white focus:outline-none font-[var(--font-creato-display)] bg-transparent border-0"
        />

        {/* Filter Button - Active state when expanded */}
        <button
          type="button"
          onClick={onFilterToggle}
          className="flex items-center gap-2 px-4 py-4 whitespace-nowrap transition-all duration-300 space-x-2 hover:text-white/80 text-white cursor-pointer"
        >
          {/* Filter Icon */}
          <img
            src="/images/search/icons/filter_icon.png"
            alt="Filter"
            className="w-5 h-5 brightness-[0.7] xl:brightness-100"
          />
          <span className="text-lg font-creato font-light tracking-wider">
            Filter
          </span>
        </button>
      </div>
    </div>
  );
};

export default DesktopSearchBar;