import { Box } from '@/ui/Box';
import { motion } from 'framer-motion';

interface StepProgressRailProps {
  currentStep: number;
  totalSteps: number;
}

export function StepProgressRail({ currentStep, totalSteps }: StepProgressRailProps) {
  const progress = (currentStep / totalSteps) * 100;

  return (
    <Box w="full" h="1" bg="bg-iron-gray" rounded="full" overflow="hidden" mb={8}>
      <motion.div
        className="h-full bg-primary-blue"
        initial={{ width: 0 }}
        animate={{ width: `${progress}%` }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
      />
    </Box>
  );
}