import { motion } from "framer-motion";
import { Progress } from "@/components/ui/progress";

const STEP_LABELS = ["Welcome", "Details", "Follow", "Proof", "Quiz", "Result"];

export function StepShell({
  step,
  totalSteps = 6,
  children,
}: {
  step: number;
  totalSteps?: number;
  children: React.ReactNode;
}) {
  const progress = ((step + 1) / totalSteps) * 100;
  return (
    <div className="relative z-10 w-full max-w-2xl mx-auto px-4 py-8 md:py-12">
      {step >= 0 && step < totalSteps && (
        <div className="mb-6 md:mb-8">
          <div className="flex items-center justify-between text-xs text-muted-foreground mb-2 font-medium tracking-wide uppercase">
            <span>Step {step + 1} / {totalSteps}</span>
            <span>{STEP_LABELS[step]}</span>
          </div>
          <Progress value={progress} className="h-1 bg-white/5" />
        </div>
      )}
      <motion.div
        key={step}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
        className="glass-card rounded-3xl p-6 md:p-10"
      >
        {children}
      </motion.div>
    </div>
  );
}