"use client";

import { useId } from "react";

import type { ProductSort } from "@/types/search";

const OPTIONS: { value: ProductSort; label: string }[] = [
  { value: "relevance", label: "Best match" },
  { value: "price-asc", label: "Price: low to high" },
  { value: "price-desc", label: "Price: high to low" },
  { value: "rating-desc", label: "Top rated" },
  { value: "name-asc", label: "Name: A to Z" },
];

/**
 * Sort control. "Best match" is only meaningful while a query is active, so it
 * is disabled for the plain catalogue listing.
 */
export function ProductSort({
  value,
  onChange,
  relevanceDisabled = false,
}: {
  value: ProductSort;
  onChange: (sort: ProductSort) => void;
  relevanceDisabled?: boolean;
}) {
  const id = useId();

  return (
    <div className="flex items-center gap-2">
      <label htmlFor={id} className="text-sm text-slate-600">
        Sort by
      </label>
      <select
        id={id}
        value={value}
        onChange={(event) => onChange(event.target.value as ProductSort)}
        className="rounded-lg border border-slate-300 bg-white py-2 pr-8 pl-3 text-sm font-medium text-slate-800 transition-colors hover:border-slate-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 focus:outline-none"
      >
        {OPTIONS.map((option) => (
          <option key={option.value} value={option.value} disabled={relevanceDisabled && option.value === "relevance"}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}