'use client';

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

interface ProgressBarProps {
  currentStep: 1 | 2 | 3;
  totalSteps?: 3;
  className?: string;
}

export default function ProgressBar({ currentStep, className }: ProgressBarProps) {
  return (
    <div className={cn('flex gap-1.5', className)} role="progressbar" aria-valuenow={currentStep} aria-valuemin={1} aria-valuemax={3}>
      {([1, 2, 3] as const).map((step) => {
        const isActive = step <= currentStep;
        return (
          <div
            key={step}
            className="relative flex-1 h-1 rounded-full bg-outline-variant/40 overflow-hidden"
          >
            <motion.div
              className="absolute inset-0 rounded-full bg-gradient-to-r from-primary-dark to-primary"
              initial={{ scaleX: 0 }}
              animate={{ scaleX: isActive ? 1 : 0 }}
              transition={{
                type: 'spring',
                stiffness: 300,
                damping: 30,
                delay: isActive ? (step - 1) * 0.05 : 0,
              }}
              style={{ transformOrigin: 'left' }}
            />
          </div>
        );
      })}
    </div>
  );
}
