import React from 'react';
import { useConfig } from '../contexts/ConfigContext';

export function ProviderInfo() {
  try {
    const { provider, selectedModel, availableModels } = useConfig();

    // Get the display name of the selected model
    const modelName = availableModels.find(m => m.id === selectedModel)?.name || selectedModel;

    // Capitalize provider name
    const providerDisplayName = provider.charAt(0).toUpperCase() + provider.slice(1);

    return (
      <div className="flex flex-col gap-1 text-xs text-muted-foreground">
        <div className="flex items-center gap-2">
          <span className="font-medium">Provider:</span>
          <span>{providerDisplayName}</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="font-medium">Model:</span>
          <span>{modelName}</span>
        </div>
      </div>
    );
  } catch (error) {
    // Return empty div if context isn't available yet
    return <div className="text-xs text-muted-foreground">Loading provider info...</div>;
  }
}