import React, { useState, useEffect } from 'react';
import { useSoulStream } from '../contexts/SoulStreamContext';
import type { ReputationComponentProps, ReputationData } from '../types';

/**
 * ReputationComponent displays reputation metrics from the SoulStream protocol
 */
const ReputationComponent: React.FC<ReputationComponentProps> = ({ 
  walletAddress, 
  showDetails = false 
}) => {
  const [reputationData, setReputationData] = useState<ReputationData | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  
  const { getReputationScore } = useSoulStream();
  
  useEffect(() => {
    const fetchReputation = async () => {
      if (!walletAddress) return;
      
      try {
        setLoading(true);
        const data = await getReputationScore(walletAddress);
        setReputationData(data);
        setError(null);
      } catch (err) {
        console.error('Failed to fetch reputation data:', err);
        setError('Failed to load reputation data');
      } finally {
        setLoading(false);
      }
    };
    
    fetchReputation();
  }, [walletAddress, getReputationScore]);
  
  if (loading) return <div>Loading reputation data...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!reputationData) return <div>No reputation data available</div>;
  
  return (
    <div className="reputation-component">
      <h3>Reputation Score</h3>
      <div className="score">{reputationData.score}</div>
      
      {showDetails && (
        <div className="details">
          <h4>Reputation Details</h4>
          <ul>
            <li>Trust: {reputationData.trust}</li>
            <li>Activity: {reputationData.activity}</li>
            <li>Engagement: {reputationData.engagement}</li>
          </ul>
        </div>
      )}
    </div>
  );
};

export default ReputationComponent;