"use client";

import { useRouter, useSearchParams } from "next/navigation";

const sortOptions = [
  { value: "popular", label: "Most Popular" },
  { value: "newest", label: "Newest" },
  { value: "most-reviewed", label: "Most Reviewed" },
  { value: "recently-active", label: "Recently Active" },
];

export default function SortDropdown({ current }: { current: string }) {
  const router = useRouter();
  const searchParams = useSearchParams();

  function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const params = new URLSearchParams(searchParams.toString());
    if (e.target.value === "popular") {
      params.delete("sort");
    } else {
      params.set("sort", e.target.value);
    }
    const qs = params.toString();
    router.push(`/escorts${qs ? `?${qs}` : ""}`);
  }

  return (
    <select
      value={current}
      onChange={handleChange}
      className="bg-surface border border-surface-light text-text text-sm rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
    >
      {sortOptions.map((opt) => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  );
}