"use client";

import { useRouter } from "next/navigation";
import { MapPin } from "lucide-react";

type SiteOption = { id: string; name: string };

export function SiteSelect({
  sites,
  currentSiteId,
  baseHref,
  paramKey = "siteId",
}: {
  sites: SiteOption[];
  currentSiteId: string | null;
  baseHref: string;
  paramKey?: string;
}) {
  const router = useRouter();
  return (
    <div className="flex items-center gap-3">
      <MapPin className="h-4 w-4 text-neutral-400 shrink-0" />
      <span className="text-sm font-medium text-neutral-700 whitespace-nowrap">Sort by distance from:</span>
      <select
        value={currentSiteId ?? ""}
        onChange={(e) => {
          const id = e.target.value;
          router.push(id ? `${baseHref}?${paramKey}=${id}` : baseHref);
        }}
        className="rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
      >
        <option value="">Price (cheapest first)</option>
        {sites.map((s) => (
          <option key={s.id} value={s.id}>{s.name}</option>
        ))}
      </select>
      {currentSiteId && (
        <button
          onClick={() => router.push(baseHref)}
          className="text-xs text-neutral-500 hover:text-neutral-700 hover:underline"
        >
          Clear
        </button>
      )}
    </div>
  );
}