import { useEffect, useState } from "react";
import { motion } from "framer-motion";

interface LoaderBarProps {
  steps: string[]; // lista de etapas (mensagens)
  currentStep: number; // índice atual
  isDone?: boolean; // quando finaliza
}

const LoaderBar = ({ steps, currentStep, isDone }: LoaderBarProps) => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const stepPercent = (currentStep / steps.length) * 100;
    setProgress(stepPercent);
  }, [currentStep, steps.length]);

  return (
    <div className="flex bg- flex-col items-center justify-center gap-4 w-full max-w-md text-center">
      <div className="w-full bg-slate-200 rounded-full h-3 overflow-hidden">
        <motion.div
          className="bg-blue-500 h-3 rounded-full"
          initial={{ width: 0 }}
          animate={{ width: `${progress}%` }}
          transition={{ duration: 0.5 }}
        />
      </div>

      <p className="text-black text-2xl">
        {isDone ? "Concluído!" : steps[currentStep] || "Carregando..."}
      </p>
    </div>
  );
};

export default LoaderBar;