import { Search, SlidersHorizontal } from "lucide-react";
import type { StationFilter, StationSort } from "@/components/weather/stations-explorer";

export function StationSearch({ query, onQueryChange, sort, onSortChange, filter, onFilterChange }: { query: string; onQueryChange: (value: string) => void; sort: StationSort; onSortChange: (value: StationSort) => void; filter: StationFilter; onFilterChange: (value: StationFilter) => void }) {
  return (
    <div className="glass grid gap-3 rounded-[1.75rem] p-3 sm:grid-cols-[1fr_auto_auto]">
      <label className="relative">
        <span className="sr-only">Szukaj stacji synoptycznej</span>
        <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
        <input value={query} onChange={(event) => onQueryChange(event.target.value)} placeholder="Szukaj stacji IMGW…" className="w-full rounded-2xl border border-white/40 bg-white/45 py-3 pl-10 pr-4 text-sm placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-white/5" />
      </label>
      <label className="relative">
        <span className="sr-only">Sortowanie stacji</span>
        <select value={sort} onChange={(event) => onSortChange(event.target.value as StationSort)} className="w-full appearance-none rounded-2xl border border-white/40 bg-white/45 py-3 pl-4 pr-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
          <option value="alphabetical">Alfabetycznie</option>
          <option value="temperature-desc">Temperatura: najwyższa</option>
          <option value="temperature-asc">Temperatura: najniższa</option>
          <option value="humidity-desc">Wilgotność: najwyższa</option>
          <option value="pressure-desc">Ciśnienie: najwyższe</option>
        </select>
        <SlidersHorizontal className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
      </label>
      <label>
        <span className="sr-only">Filtr stacji</span>
        <select value={filter} onChange={(event) => onFilterChange(event.target.value as StationFilter)} className="w-full rounded-2xl border border-white/40 bg-white/45 px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
          <option value="all">Wszystkie stacje</option>
          <option value="warmest">Najcieplejsze</option>
          <option value="coldest">Najzimniejsze</option>
          <option value="windy">Największy wiatr</option>
          <option value="rainy">Największy opad</option>
        </select>
      </label>
    </div>
  );
}