"use client";

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

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 }) {
  const { t } = useI18n();
  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">{t("stations.searchLabel")}</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={t("stations.searchPlaceholder")} 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">{t("stations.sortLabel")}</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">{t("stations.sortAlphabetical")}</option>
          <option value="temperature-desc">{t("stations.sortTemperatureDesc")}</option>
          <option value="temperature-asc">{t("stations.sortTemperatureAsc")}</option>
          <option value="humidity-desc">{t("stations.sortHumidityDesc")}</option>
          <option value="pressure-desc">{t("stations.sortPressureDesc")}</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">{t("stations.filterLabel")}</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">{t("stations.filterAll")}</option>
          <option value="warmest">{t("stations.filterWarmest")}</option>
          <option value="coldest">{t("stations.filterColdest")}</option>
          <option value="windy">{t("stations.filterWindy")}</option>
          <option value="rainy">{t("stations.filterRainy")}</option>
        </select>
      </label>
    </div>
  );
}