interface SearchBarProps {
  className?: string;
  showSort?: boolean;
}

export default function SearchBar({ className = "", showSort = false }: SearchBarProps) {
  return (
    <form
      action="/listings"
      className={`flex items-center gap-3 bg-white border border-mist rounded-pill shadow-card pl-6 pr-2 py-2 ${className}`}
    >
      <input
        type="text"
        name="q"
        placeholder="Search by town, e.g. Akim Oda"
        className="flex-1 bg-transparent border-none outline-none text-sm text-ink placeholder:text-ink-soft py-2 min-w-0"
      />
      <select
        name={showSort ? "sort" : "type"}
        aria-label={showSort ? "Sort by" : "House type"}
        className="bg-transparent border-none outline-none text-sm text-ink-soft hidden sm:block"
      >
        {showSort ? (
          <>
            <option value="recent">Most recent</option>
            <option value="price-low">Price: low to high</option>
            <option value="price-high">Price: high to low</option>
            <option value="verified">Verified first</option>
          </>
        ) : (
          <>
            <option value="">Any house type</option>
            <option value="Single room">Single room</option>
            <option value="2 bedroom">2 bedroom</option>
            <option value="3 bedroom">3 bedroom</option>
            <option value="4 bedroom">4 bedroom</option>
            <option value="Compound house">Compound house</option>
          </>
        )}
      </select>
      <button
        type="submit"
        className="inline-flex items-center justify-center font-semibold text-sm px-6 py-2.5 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors whitespace-nowrap"
      >
        Search
      </button>
    </form>
  );
}