"use client";

export default function Chips({
  options,
  selected,
  onToggle,
}: {
  options: { id: string; name: string }[];
  selected: string[];
  onToggle: (id: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {options.map((o) => {
        const active = selected.includes(o.id);
        return (
          <button
            key={o.id}
            type="button"
            onClick={() => onToggle(o.id)}
            className={`rounded-full border px-3 py-1.5 text-sm font-medium transition-colors ${
              active
                ? "border-emerald bg-emerald text-white"
                : "border-sand-dark bg-white text-muted hover:border-emerald hover:text-emerald"
            }`}
          >
            {o.name}
          </button>
        );
      })}
    </div>
  );
}