'use client';

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

interface OnboardingStepperProps {
  currentStep: number;
  totalSteps: number;
  steps: string[];
}

/**
 * OnboardingStepper
 * 
 * A progress indicator with a "pit limiter" vibe.
 * Uses a progress line and step labels.
 */
export function OnboardingStepper({ currentStep, totalSteps, steps }: OnboardingStepperProps) {
  const progress = (currentStep / totalSteps) * 100;

  return (
    <Stack gap={4} w="full">
      <Stack w="full" h="1.5" bg="bg-iron-gray" rounded="full" overflow="hidden" position="relative">
        <Stack
          as={motion.div}
          initial={{ width: 0 }}
          animate={{ width: `${progress}%` }}
          transition={{ duration: 0.5, ease: 'easeOut' }}
          h="full"
          bg="bg-primary-blue"
        />
      </Stack>
      
      <Stack display="flex" justify="between">
        {steps.map((label, index) => {
          const stepNumber = index + 1;
          const isActive = stepNumber === currentStep;
          const isCompleted = stepNumber < currentStep;
          
          return (
            <Stack key={label} direction="row" align="center" gap={2}>
              <Stack 
                w="6" 
                h="6" 
                rounded="full" 
                display="flex" 
                center 
                border 
                borderColor={isActive || isCompleted ? 'border-primary-blue' : 'border-charcoal-outline'}
                bg={isCompleted ? 'bg-primary-blue' : isActive ? 'bg-primary-blue/20' : 'transparent'}
                transition
              >
                <Text 
                  size="xs" 
                  weight="bold" 
                  color={isCompleted ? 'text-white' : isActive ? 'text-primary-blue' : 'text-gray-500'}
                >
                  {stepNumber}
                </Text>
              </Stack>
              <Text 
                size="sm" 
                weight={isActive ? 'bold' : 'medium'} 
                color={isActive ? 'text-white' : 'text-gray-500'}
                uppercase
                letterSpacing="wider"
              >
                {label}
              </Text>
            </Stack>
          );
        })}
      </Stack>
    </Stack>
  );
}