"use client";

import { useRouter } from "next/navigation";
import type { Translations } from "@/lib/i18n";
import { useBuildProductsUrl } from "@/app/products/useBuildProductsUrl";

interface SortDropdownProps {
  currentSort: string | undefined;
  t: Translations;
}

export default function SortDropdown({
  currentSort,
  t,
}: SortDropdownProps) {
  const router = useRouter();
  const buildUrl = useBuildProductsUrl();

  return (
    <select
      value={currentSort || "newest"}
      onChange={(e) => {
        const url = buildUrl({ sort: e.target.value, page: undefined });
        router.push(url);
      }}
      className="border-2 border-gray-200 rounded-xl px-4 py-2.5 text-sm font-medium text-gray-800 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white cursor-pointer"
    >
      <option value="newest">{t.filters.sortNewest}</option>
      <option value="price_asc">{t.filters.sortPriceLowHigh}</option>
      <option value="price_desc">{t.filters.sortPriceHighLow}</option>
    </select>
  );
}