frontend/src/components/shared/LoadingOrb.jsx

import { Check } from 'lucide-react';
import { motion } from 'framer-motion';

const DEFAULT_STEPS = [
  'Connecting to IBM Bob',
  'Cloning repository',
  'Scanning file structure',
  'Detecting technology stack',
  'Parsing dependencies',
  'Generating intelligence',
];

export default function LoadingOrb({ steps = DEFAULT_STEPS, currentStep = 0, title = 'IBM Bob is analyzing' }) {
  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-8">
      <div className="relative h-28 w-28">
        <motion.div
          animate={{ rotate: 360 }}
          transition={{ duration: 4, repeat: Infinity, ease: 'linear' }}
          className="absolute inset-0 rounded-full border-2 border-transparent border-r-cyan-400 border-t-emerald-400"
        />
        <motion.div
          animate={{ rotate: -360 }}
          transition={{ duration: 5.5, repeat: Infinity, ease: 'linear' }}
          className="absolute inset-4 rounded-full border-2 border-transparent border-b-amber-400 border-l-blue-400"
        />
        <div className="absolute inset-8 rounded-full border border-white/10 bg-slate-950/80 flex items-center justify-center">
          <span className="font-display text-xl font-bold gradient-text">AI</span>
        </div>
      </div>

      <div className="text-center">
        <h3 className="font-display text-xl font-bold text-white">{title}</h3>
        <p className="mt-1 text-sm text-slate-500">IBM Bob inference intelligence pipeline</p>
      </div>

      <div className="w-full max-w-md space-y-2">
        {steps.map((step, index) => (
          <motion.div
            key={step}
            initial={{ opacity: 0, x: -14 }}
            animate={{ opacity: index <= currentStep ? 1 : 0.35, x: 0 }}
            transition={{ delay: index * 0.04 }}
            className="flex items-center gap-3 text-sm"
          >
            <div
              className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full ${
                index < currentStep ? 'bg-emerald-500' : index === currentStep ? 'bg-cyan-500 pulse-dot' : 'bg-slate-700'
              }`}
            >
              {index < currentStep && <Check className="h-3 w-3 text-white" />}
            </div>
            <span className={index <= currentStep ? 'text-slate-200' : 'text-slate-600'}>{step}</span>
          </motion.div>
        ))}
      </div>
    </div>
  );
}