components/PredictionResult.jsx

export default function PredictionResult({ prediction, sport, event }) {
  const getStatLabel = (key) => {
    const labels = {
      // Football
      passingYards: 'Passing Yards',
      rushingYards: 'Rushing Yards',
      touchdowns: 'Touchdowns',
      sacks: 'Sacks',
      interceptions: 'Interceptions',
      qbRating: 'QB Rating',
      // Baseball
      battingAverage: 'Batting Avg',
      homeRuns: 'Home Runs',
      rbis: 'RBIs',
      era: 'ERA',
      strikeouts: 'Strikeouts',
      hits: 'Hits',
      // Basketball
      points: 'Points',
      rebounds: 'Rebounds',
      assists: 'Assists',
      steals: 'Steals',
      blocks: 'Blocks',
      threePointers: '3-Pointers',
      fieldGoalPct: 'FG%'
    }
    return labels[key] || key
  }

  const getWinnerColor = (team) => {
    if (prediction.winner === 'tie') return 'text-yellow-400'
    const isHomeWinner = prediction.winner === 'home'
    const isHomeTeam = team === 'home'
    return (isHomeWinner === isHomeTeam) ? 'text-green-400' : 'text-red-400'
  }

  return (
    <div className="space-y-6">
      {/* Match Header */}
      <div className="card text-center">
        <p className="text-gray-400 text-sm uppercase tracking-wide mb-4">Predicted Result</p>
        
        <div className="flex items-center justify-center gap-8 mb-6">
          {/* Home Team */}
          <div className="text-center">
            <div className="w-20 h-20 rounded-full bg-gray-700 flex items-center justify-center text-4xl mx-auto mb-3">
              {event.homeTeam.logo}
            </div>
            <h3 className="text-xl font-bold text-white">{event.homeTeam.name}</h3>
            <p className={`text-4xl font-bold mt-2 ${getWinnerColor('home')}`}>
              {prediction.score.home}
            </p>
          </div>

          {/* VS */}
          <div className="text-2xl font-bold text-gray-500">-</div>

          {/* Away Team */}
          <div className="text-center">
            <div className="w-20 h-20 rounded-full bg-gray-700 flex items-center justify-center text-4xl mx-auto mb-3">
              {event.awayTeam.logo}
            </div>
            <h3 className="text-xl font-bold text-white">{event.awayTeam.name}</h3>
            <p className={`text-4xl font-bold mt-2 ${getWinnerColor('away')}`}>
              {prediction.score.away}
            </p>
          </div>
        </div>

        {/* Winner Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gray-700">
          <span className="text-2xl">
            {prediction.winner === 'home' ? '🏆' : prediction.winner === 'away' ? '🏆' : '🤝'}
          </span>
          <span className="font-semibold">
            {prediction.winner === 'home' ? `${event.homeTeam.name} Win` : 
             prediction.winner === 'away' ? `${event.awayTeam.name} Win` : 'Tie Game'}
          </span>
        </div>

        {/* Confidence */}
        <div className="mt-4">
          <p className="text-sm text-gray-400">Prediction Confidence</p>
          <div className="flex items-center justify-center gap-2 mt-1">
            <div className="w-32 h-2 bg-gray-700 rounded-full overflow-hidden">
              <div 
                className="h-full bg-gradient-to-r from-accent to-primary transition-all duration-1000"
                style={{ width: `${prediction.confidence}%` }}
              />
            </div>
            <span className="font-bold text-accent">{prediction.confidence}%</span>
          </div>
        </div>
      </div>

      {/* Team Statistics */}
      <div className="grid md:grid-cols-2 gap-6">
        {/* Home Team Stats */}
        <div className="card">
          <div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-700">
            <span className="text-2xl">{event.homeTeam.logo}</span>
            <h3 className="text-xl font-bold text-white">{event.homeTeam.name}</h3>
          </div>
          <div className="grid grid-cols-2 gap-4">
            {Object.entries(prediction.homeStats).map(([key, value]) => (
              <div key={key} className="stat-card">
                <p className="text-xs text-gray-400 uppercase">{getStatLabel(key)}</p>
                <p className="text-2xl font-bold text-accent">{value}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Away Team Stats */}
        <div className="card">
          <div className="flex items-center gap-3 mb-4 pb-4 border-b border-gray-700">
            <span className="text-2xl">{event.awayTeam.logo}</span>
            <h3 className="text-xl font-bold text-white">{event.awayTeam.name}</h3>
          </div>
          <div className="grid grid-cols-2 gap-4">
            {Object.entries(prediction.awayStats).map(([key, value]) => (
              <div key={key} className="stat-card">
                <p className="text-xs text-gray-400 uppercase">{getStatLabel(key)}</p>
                <p className="text-2xl font-bold text-accent">{value}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Key Factors */}
      <div className="card">
        <h3 className="text-xl font-bold text-white mb-4">🔍 Key Prediction Factors</h3>
        <ul className="space-y-3">
          {prediction.keyFactors.map((factor, index) => (
            <li key={index} className="flex items-start gap-3">
              <span className="text-accent mt-1">•</span>
              <span className="text-gray-300">{factor}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}