"use client";

import { useRouter } from "next/navigation";

const FILTER_CHIPS = [
  { label: "Available Now", params: "available=true" },
  { label: "Verified", params: "verified=true" },
  { label: "VIP", params: "vip=true" },
  { label: "New", params: "new=true" },
  // R14 A.4: time-bounded discovery surface — links to /search/results?period=week.
  { label: "New This Week", params: "period=week" },
  { label: "London", params: "keyword=London" },
  { label: "Amsterdam", params: "keyword=Amsterdam" },
  { label: "Paris", params: "keyword=Paris" },
  { label: "Dubai", params: "keyword=Dubai" },
  { label: "Berlin", params: "keyword=Berlin" },
  { label: "Barcelona", params: "keyword=Barcelona" },
];

export default function QuickFilters({ countrySlug }: { countrySlug?: string }) {
  const router = useRouter();

  // D.11: when rendered inside a country page (countrySlug supplied), forward
  // the slug as a search param so the chip click stays in-country.
  const baseParam = countrySlug ? `country=${encodeURIComponent(countrySlug)}&` : "";

  return (
    <div className="sticky top-16 z-20 bg-background/80 backdrop-blur-sm py-3 -mx-1">
      <div className="flex gap-2 overflow-x-auto pb-2 px-1 scrollbar-thin scrollbar-thumb-surface-light snap-x">
        {FILTER_CHIPS.map((chip) => (
          <button
            key={chip.label}
            onClick={() => router.push(`/search/results?${baseParam}${chip.params}`)}
            className="flex-shrink-0 snap-start bg-surface hover:bg-surface-light border border-white/10 hover:border-gold/30 text-text-muted hover:text-gold px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 whitespace-nowrap"
          >
            {chip.label}
          </button>
        ))}
      </div>
    </div>
  );
}