src/components/BenchmarkComparisonSelector.tsx

// components/BenchmarkComparisonSelector.tsx
import React from "react";
import { Checkbox } from "@/components/ui/checkbox";

interface Props {
  allMetrics: string[];
  selected: string[];
  onChange: (metric: string, checked: boolean) => void;
}

export const BenchmarkComparisonSelector: React.FC<Props> = ({
  allMetrics,
  selected,
  onChange,
}) => {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-4">
      {allMetrics.map((metric) => (
        <div key={metric} className="flex items-center space-x-2">
          <Checkbox
            id={metric}
            checked={selected.includes(metric)}
            onCheckedChange={(checked) => onChange(metric, !!checked)}
          />
          <label htmlFor={metric} className="text-sm">
            {metric.replace(/_/g, " ").toUpperCase()}
          </label>
        </div>
      ))}
    </div>
  );
};