import Card from '@/components/ui/Card';

interface ScoringOverviewCardProps {
  gameName: string;
  scoringPresetName?: string;
  dropPolicySummary: string;
  totalChampionships: number;
}

export function ScoringOverviewCard({ 
  gameName,
  scoringPresetName,
  dropPolicySummary,
  totalChampionships
}: ScoringOverviewCardProps) {
  return (
    <Card>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-xl font-semibold text-white">Scoring System</h2>
          <p className="text-sm text-gray-400 mt-1">Points allocation and championship rules</p>
        </div>
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
          <span className="text-sm font-medium text-primary-blue">{scoringPresetName || 'Custom'}</span>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Platform</p>
          <p className="text-lg font-semibold text-white">{gameName}</p>
        </div>
        
        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Championships</p>
          <p className="text-lg font-semibold text-white">{totalChampionships}</p>
        </div>
        
        <div className="bg-deep-graphite rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1 font-medium">Drop Policy</p>
          <p className="text-lg font-semibold text-white truncate" title={dropPolicySummary}>
            {dropPolicySummary.includes('Best') ? dropPolicySummary.split(' ').slice(0, 3).join(' ') : 
             dropPolicySummary.includes('Worst') ? dropPolicySummary.split(' ').slice(0, 3).join(' ') : 
             'All count'}
          </p>
        </div>
      </div>

      <div className="p-4 bg-deep-graphite rounded-lg border border-charcoal-outline">
        <p className="text-sm text-gray-400">{dropPolicySummary}</p>
      </div>
    </Card>
  );
}