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

interface ServerProgressProps {
  progress: number;
  status: string;
}

const stages = [
  'Allocating server...',
  'Booting CS2...',
  'Loading MatchZy...',
  'Configuring match...',
  'Ready!',
];

export function ServerProgress({ progress, status }: ServerProgressProps) {
  return (
    <div className="w-full max-w-md mx-auto">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm text-text-secondary">{status || stages[Math.min(Math.floor(progress / 25), 4)]}</span>
        <span className="text-sm font-mono text-amber-500">{Math.round(progress)}%</span>
      </div>

      <div className="flex gap-1">
        {Array.from({ length: 10 }, (_, i) => {
          const segmentProgress = progress / 10;
          const isFilled = i < segmentProgress;
          const isCurrent = i === Math.floor(segmentProgress);

          return (
            <motion.div
              key={i}
              className={cn(
                'flex-1 h-2 rounded-sm',
                isFilled ? 'bg-amber-500' : 'bg-white/10'
              )}
              animate={isCurrent ? { opacity: [0.5, 1, 0.5] } : {}}
              transition={isCurrent ? { duration: 1, repeat: Infinity } : {}}
            />
          );
        })}
      </div>
    </div>
  );
}
