src/components/BenchmarkComparisonSelector.tsx

import React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button"; // Assuming you have a Button component

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

export const BenchmarkComparisonSelector: React.FC<Props> = ({
  allMetrics,
  selected,
  onChange,
}) => {
  const allSelected = allMetrics.every((metric) => selected.includes(metric));

  const toggleAll = () => {
    allMetrics.forEach((metric) => {
      const shouldCheck = !allSelected;
      onChange(metric, shouldCheck);
    });
  };

  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>

       <div className="flex justify-start py-4">
        <Button size="sm" variant="ghost" onClick={toggleAll}>
          {allSelected ? "Uncheck All" : "Check All"}
        </Button>
      </div>
    </>
  );
};