"use client";

import { useState } from "react";
import { Filter, Map, SlidersHorizontal } from "lucide-react";

const sortOptions = ["Mesafe", "Puan", "Yorum sayısı"];
const filterOptions = ["Açık olanlar", "7/24", "Yürüme mesafesi"];

export default function SearchFilters() {
  const [sort, setSort] = useState("Mesafe");
  const [activeFilters, setActiveFilters] = useState<string[]>(["Açık olanlar"]);

  const toggleFilter = (filter: string) => {
    setActiveFilters((prev) =>
      prev.includes(filter) ? prev.filter((f) => f !== filter) : [...prev, filter]
    );
  };

  return (
    <div className="sticky top-[72px] z-40 border-b border-white/5 bg-[#030712]/95 backdrop-blur-xl">
      <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex flex-wrap items-center gap-2">
            <span className="flex items-center gap-1.5 text-xs font-medium uppercase tracking-wider text-slate-500">
              <SlidersHorizontal className="h-3.5 w-3.5" />
              Filtre
            </span>
            {filterOptions.map((filter) => (
              <button
                key={filter}
                type="button"
                onClick={() => toggleFilter(filter)}
                className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-all ${
                  activeFilters.includes(filter)
                    ? "border-emerald-500/40 bg-emerald-500/15 text-emerald-300"
                    : "border-white/10 bg-white/5 text-slate-400 hover:border-white/20"
                }`}
              >
                {filter}
              </button>
            ))}
          </div>

          <div className="flex items-center gap-2">
            <span className="text-xs text-slate-500">Sırala:</span>
            {sortOptions.map((option) => (
              <button
                key={option}
                type="button"
                onClick={() => setSort(option)}
                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all ${
                  sort === option
                    ? "bg-white/10 text-white"
                    : "text-slate-500 hover:text-slate-300"
                }`}
              >
                {option}
              </button>
            ))}
            <button
              type="button"
              className="ml-1 flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-300 lg:hidden"
            >
              <Map className="h-3.5 w-3.5" />
              Harita
            </button>
          </div>
        </div>

        <p className="mt-2 flex items-center gap-1.5 text-xs text-slate-600">
          <Filter className="h-3 w-3" />
          Statik önizleme — filtreler dinamikleştirildiğinde aktif olacak
        </p>
      </div>
    </div>
  );
}