import { Check } from 'lucide-react';
import React from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

export interface Step {
  id: string;
  label: string;
}

export interface StepIndicatorProps {
  steps: Step[];
  currentStepId: string;
  completedStepIds: string[];
}

export const StepIndicator = ({ 
  steps, 
  currentStepId, 
  completedStepIds 
}: StepIndicatorProps) => {
  return (
    <Box display="flex" alignItems="center" gap={4}>
      {steps.map((step, index) => {
        const isCurrent = step.id === currentStepId;
        const isCompleted = completedStepIds.includes(step.id);
        const isLast = index === steps.length - 1;

        return (
          <React.Fragment key={step.id}>
            <Box display="flex" alignItems="center" gap={2}>
              <Box 
                width="2rem" 
                height="2rem" 
                display="flex" 
                alignItems="center" 
                justifyContent="center" 
                rounded="full"
                bg={isCompleted ? 'var(--ui-color-intent-success)' : isCurrent ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
                style={{ border: isCurrent ? '2px solid var(--ui-color-intent-primary)' : 'none' }}
              >
                {isCompleted ? (
                  <Icon icon={Check} size={4} intent="high" />
                ) : (
                  <Text size="xs" weight="bold" variant={isCurrent ? 'high' : 'low'}>
                    {index + 1}
                  </Text>
                )}
              </Box>
              <Text size="sm" weight={isCurrent ? 'bold' : 'medium'} variant={isCurrent ? 'high' : 'low'}>
                {step.label}
              </Text>
            </Box>
            {!isLast && (
              <Box flex={1} height="2px" bg="var(--ui-color-border-muted)" minWidth="2rem" />
            )}
          </React.Fragment>
        );
      })}
    </Box>
  );
};