"use client";

interface Option {
  id: number;
  label: string;
}

interface Props {
  options: Option[];
  selectedIds: number[];
  onChange: (ids: number[]) => void;
}

export default function PillMultiSelect({
  options,
  selectedIds,
  onChange,
}: Props) {
  const toggle = (id: number) => {
    if (selectedIds.includes(id)) {
      onChange(selectedIds.filter((x) => x !== id));
    } else {
      onChange([...selectedIds, id]);
    }
  };

  return (
    <div className="astrologer-pill-grid">
      {options.map((option) => {
        const active = selectedIds.includes(option.id);

        return (
          <button
            key={option.id}
            type="button"
            className={`astrologer-pill ${active ? "active" : ""}`}
            onClick={() => toggle(option.id)}
          >
            {option.label} {active && "✓"}
          </button>
        );
      })}
    </div>
  );
}