'use client';

import { geminiImageModels, veoVideoModels } from '@/lib/google-ai';

interface ModelSelectorProps {
  selectedModel: string;
  onModelChange: (model: string) => void;
  contentType: 'image' | 'video';
}

export function ModelSelector({ selectedModel, onModelChange, contentType }: ModelSelectorProps) {
  const models = contentType === 'image' ? geminiImageModels : veoVideoModels;

  return (
    <div className="space-y-3">
      <label className="text-sm font-medium text-foreground">
        Modelo de IA
      </label>
      <select
        value={selectedModel}
        onChange={(e) => onModelChange(e.target.value)}
        className="w-full px-4 py-2.5 bg-secondary border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary transition-all"
      >
        {models.map((model) => (
          <option key={model.id} value={model.id}>
            {model.name} - {model.description}
          </option>
        ))}
      </select>

      {/* Info del modelo seleccionado */}
      <div className="text-xs text-muted-foreground bg-muted p-3 rounded-lg">
        {(() => {
          const model = models.find(m => m.id === selectedModel);
          if (!model) return null;

          return (
            <div className="space-y-1">
              <p><strong>Modelo:</strong> {model.name}</p>
              <p><strong>ID:</strong> {model.id}</p>
              {model.capabilities && (
                <p><strong>Capacidades:</strong> {model.capabilities.join(', ')}</p>
              )}
            </div>
          );
        })()}
      </div>
    </div>
  );
}