forge/frontend/components/ProviderControls.tsx

'use client';

import { ProviderConfig } from '@/types/providers';
import DynamicControl from './DynamicControl';

interface ProviderControlsProps {
  config: ProviderConfig;
  selectedModel: string;
  values: Record<string, any>;
  onChange: (values: Record<string, any>) => void;
}

export default function ProviderControls({
  config,
  selectedModel,
  values,
  onChange
}: ProviderControlsProps) {
  const model = config.models.find(m => m.id === selectedModel);

  const handleControlChange = (name: string, value: any) => {
    onChange({
      ...values,
      [name]: value
    });
  };

  return (
    <div className="space-y-6">
      {/* Provider Info */}
      <div className="pb-2 border-b border-gray-700">
        <p className="text-xs text-gray-500">
          Provider: <span className="text-forge-yellow">{config.name}</span>
          {' • '}
          Controls: <span className="text-forge-yellow">
            {config.commonControls.length + (model?.controls?.length || 0)}
          </span>
        </p>
      </div>

      {/* Common Controls */}
      {config.commonControls.length > 0 && (
        <div className="space-y-4">
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
            Common Options ({config.commonControls.length})
          </h3>
          <div className="space-y-4">
            {config.commonControls.map((control) => (
              <DynamicControl
                key={control.name}
                control={control}
                value={values[control.name]}
                onChange={handleControlChange}
                allValues={values}
              />
            ))}
          </div>
        </div>
      )}

      {/* Model-Specific Controls */}
      {model?.controls && model.controls.length > 0 && (
        <div className="space-y-4 pt-4 border-t border-gray-800">
          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">
            {model.name} Options
          </h3>
          <div className="space-y-4">
            {model.controls.map((control) => (
              <DynamicControl
                key={control.name}
                control={control}
                value={values[control.name]}
                onChange={handleControlChange}
                allValues={values}
              />
            ))}
          </div>
        </div>
      )}

      {/* Features Badge */}
      {config.features.length > 0 && (
        <div className="pt-4 border-t border-gray-800">
          <p className="text-xs text-gray-500 mb-2">Features:</p>
          <div className="flex flex-wrap gap-2">
            {config.features.map((feature) => (
              <span
                key={feature}
                className="px-2 py-1 bg-forge-yellow/10 text-forge-yellow text-xs rounded"
              >
                {feature.replace(/_/g, ' ')}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}