baron-sso/common/core/components/overview/OverviewSelectionChips.tsx

import type { ReactNode } from "react";

type OverviewSelectionChipOption = {
  id: string;
  label: ReactNode;
};

export function OverviewSelectionChips({
  allLabel,
  options,
  selectedIds,
  onSelectAll,
  onToggle,
}: {
  allLabel: string;
  options: OverviewSelectionChipOption[];
  selectedIds: string[];
  onSelectAll: () => void;
  onToggle: (id: string) => void;
}) {
  const isAllSelected = selectedIds.length === 0;

  return (
    <div className="flex flex-wrap gap-2 rounded-xl border border-border/60 bg-card/60 p-3">
      <label className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs">
        <input
          type="checkbox"
          checked={isAllSelected}
          onChange={onSelectAll}
          className="h-3.5 w-3.5"
        />
        <span>{allLabel}</span>
      </label>
      {options.map((option) => (
        <label
          key={option.id}
          className="inline-flex items-center gap-2 rounded-full border border-border/60 px-3 py-1.5 text-xs"
        >
          <input
            type="checkbox"
            checked={selectedIds.includes(option.id)}
            onChange={() => onToggle(option.id)}
            className="h-3.5 w-3.5"
          />
          <span>{option.label}</span>
        </label>
      ))}
    </div>
  );
}