import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/cn';

interface ScoreHeaderProps {
  team1Name: string;
  team2Name: string;
  team1Score: number;
  team2Score: number;
  team1Side?: 'CT' | 'T';
  team2Side?: 'CT' | 'T';
  round?: number;
  isLive?: boolean;
  status?: string;
}

export function ScoreHeader({
  team1Name, team2Name, team1Score, team2Score,
  team1Side, team2Side, round, isLive, status
}: ScoreHeaderProps) {
  return (
    <div className="relative bg-bg-surface border border-white/[0.06] rounded-2xl p-6 sm:p-8 overflow-hidden">
      <div className="flex items-center justify-between">
        <div className="flex-1 text-center sm:text-right">
          <p className="text-lg sm:text-xl font-bold text-text-primary">{team1Name}</p>
          {team1Side && (
            <span className={cn(
              'text-xs font-medium uppercase tracking-wider',
              team1Side === 'CT' ? 'text-accent-ct' : 'text-accent-t'
            )}>
              {team1Side}
            </span>
          )}
        </div>

        <div className="flex items-center gap-4 sm:gap-6 mx-4 sm:mx-8">
          <AnimatePresence mode="popLayout">
            <motion.span
              key={`t1-${team1Score}`}
              initial={{ scale: 1.15, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ type: 'spring', stiffness: 400, damping: 15 }}
              className={cn(
                'text-4xl sm:text-6xl font-mono font-bold',
                team1Side === 'CT' ? 'text-accent-ct' : 'text-accent-t'
              )}
            >
              {team1Score}
            </motion.span>
          </AnimatePresence>

          <span className="text-2xl text-text-muted font-light">-</span>

          <AnimatePresence mode="popLayout">
            <motion.span
              key={`t2-${team2Score}`}
              initial={{ scale: 1.15, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ type: 'spring', stiffness: 400, damping: 15 }}
              className={cn(
                'text-4xl sm:text-6xl font-mono font-bold',
                team2Side === 'CT' ? 'text-accent-ct' : 'text-accent-t'
              )}
            >
              {team2Score}
            </motion.span>
          </AnimatePresence>
        </div>

        <div className="flex-1 text-center sm:text-left">
          <p className="text-lg sm:text-xl font-bold text-text-primary">{team2Name}</p>
          {team2Side && (
            <span className={cn(
              'text-xs font-medium uppercase tracking-wider',
              team2Side === 'CT' ? 'text-accent-ct' : 'text-accent-t'
            )}>
              {team2Side}
            </span>
          )}
        </div>
      </div>

      <div className="flex items-center justify-center gap-3 mt-4 pt-4 border-t border-white/[0.06]">
        {round && (
          <span className="text-sm text-text-secondary">Round {round}</span>
        )}
        {isLive && (
          <div className="flex items-center gap-1.5">
            <span className="relative flex h-2.5 w-2.5">
              <span className="absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75 animate-ping" />
              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-red-500" />
            </span>
            <span className="text-sm font-medium text-red-400">LIVE</span>
          </div>
        )}
        {status && !isLive && (
          <span className="text-sm text-text-muted uppercase tracking-wider">{status}</span>
        )}
      </div>
    </div>
  );
}
