import { motion } from 'framer-motion'

interface BookingProgressBarProps {
  currentStep: number
  totalSteps: number
}

export function BookingProgressBar({ currentStep, totalSteps }: BookingProgressBarProps) {
  const steps = ['About You', 'Your Business', 'Your Situation']

  return (
    <div className="mb-8">
      <div className="flex justify-between mb-3">
        {steps.map((label, i) => (
          <span
            key={i}
            className="text-xs font-medium"
            style={{
              color: i + 1 <= currentStep ? 'var(--dt-accent-bright)' : 'var(--dt-text-muted)',
            }}
          >
            {label}
          </span>
        ))}
      </div>
      <div
        className="h-1.5 rounded-full overflow-hidden"
        style={{ background: 'var(--dt-bg-elevated)' }}
      >
        <motion.div
          className="h-full rounded-full"
          style={{ background: 'var(--dt-gradient-accent)' }}
          initial={{ width: 0 }}
          animate={{ width: `${(currentStep / totalSteps) * 100}%` }}
          transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }}
        />
      </div>
      <p className="text-xs mt-2 text-right" style={{ color: 'var(--dt-text-muted)' }}>
        Step {currentStep} of {totalSteps}
      </p>
    </div>
  )
}