"use client";

import DynamicSelect from "@/app/components/common/DynamicSelect";
import { useRouter, useSearchParams } from "next/navigation";


const sortOption = [
  { id: "DEFAULT", label: "Default" },
  { id: "RA", label: "Recently Added" },
  { id: "LTH", label: "Low to High" },
  { id: "HTL", label: "High to Low" },


];

export default function CategorySortBy({ id }: { id: string }) {

  const router = useRouter();
  const searchParams = useSearchParams();
  const currentSort = searchParams?.get("sort") || "DEFAULT";
  
  const handleSelect = (value: string) => {
    const params = new URLSearchParams(searchParams?.toString() || "");
    params.set("sort", value);
    console.log("[Category] sort change", {
      value,
      query: params.toString(),
    });
    router.push(`?${params.toString()}`);
  };

  return (
    <div className="flex flex-col w-full md:w-[240px] bg-gray-100">
      <DynamicSelect 
        options={sortOption} 
        heading="Sort by" 
        onSelect={handleSelect}
        defaultValue={currentSort}
      />
    </div>
  );
}