import React from 'react';
import { ComponentInfo } from '../../proxy/developerKit/componentInfo';

interface ComponentSelectorProps {
  components: ComponentInfo[];
  selectedComponentId: string | null;
  onSelectComponent: (componentId: string | null) => void;
  onRefresh: () => void;
}

const ComponentSelector: React.FC<ComponentSelectorProps> = ({
  components,
  selectedComponentId,
  onSelectComponent,
  onRefresh
}) => {
  return (
    <div className="p-4 bg-white border-b">
      <div className="flex items-center justify-between mb-2">
        <label className="block text-sm font-medium text-gray-700">
          Select Component
        </label>
        <button
          onClick={onRefresh}
          className="px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors"
          title="Refresh component list"
        >
          Refresh
        </button>
      </div>
      <select
        value={selectedComponentId || ''}
        onChange={(e) => onSelectComponent(e.target.value || null)}
        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <option value="">No component selected</option>
        {components.map(component => (
          <option key={component.id} value={component.id}>
            {component.type} - {component.id}
          </option>
        ))}
      </select>
    </div>
  );
};

export default ComponentSelector;