import React from "react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { ChevronDown, ChevronRight } from "lucide-react";
import { Provider } from "@/App";

interface Props {
  data: Provider[];
  expanded: string[];
  comparisonModels: string[];
  onToggleExpand: (provider: string) => void;
  onChangeModel: (value: string, checked: boolean) => void;
}

export const ComparisonSelector: React.FC<Props> = ({
  data,
  expanded,
  comparisonModels,
  onToggleExpand,
  onChangeModel,
}) => (
  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    {data.map((provider) => (
      <Collapsible
        key={provider.provider}
        open={expanded.includes(provider.provider)}
        onOpenChange={() => onToggleExpand(provider.provider)}
      >
        <CollapsibleTrigger asChild>
          <Button variant="outline" className="w-full justify-between">
            {provider.provider}
            {expanded.includes(provider.provider) ? (
              <ChevronDown className="h-4 w-4" />
            ) : (
              <ChevronRight className="h-4 w-4" />
            )}
          </Button>
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-2">
          {provider.models.map((model) => {
            const id = `${provider.provider}:${model.name}`;
            return (
              <div key={id} className="flex items-center space-x-2 mb-1">
                <Checkbox
                  id={id}
                  checked={comparisonModels.includes(id)}
                  onCheckedChange={(checked) => onChangeModel(id, !!checked)}
                />
                <label htmlFor={id} className="text-sm font-medium text-gray-700">
                  {model.name}
                </label>
              </div>
            );
          })}
        </CollapsibleContent>
      </Collapsible>
    ))}
  </div>
);