import * as React from 'react';
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';

interface StepperProps {
  steps: {
    title: string;
    description?: string;
  }[];
  activeStep: number;
  className?: string;
}

export function Stepper({ steps, activeStep, className }: StepperProps) {
  return (
    <div className={cn('w-full', className)}>
      <div className="relative flex justify-between">
        {/* Connection Lines */}
        <div className="absolute top-5 left-0 right-0 h-0.5 bg-muted -z-10" />
        <div
          className="absolute top-5 left-0 h-0.5 bg-primary transition-all duration-500 -z-10"
          style={{ width: `${(activeStep / (steps.length - 1)) * 100}%` }}
        />

        {steps.map((step, index) => {
          const isActive = index === activeStep;
          const isCompleted = index < activeStep;
          const isPending = index > activeStep;

          return (
            <div key={step.title} className="flex flex-col items-center flex-1">
              <div
                className={cn(
                  'w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold transition-all duration-300 border-2',
                  isActive
                    ? 'bg-primary border-primary text-primary-foreground ring-4 ring-primary/10 scale-110'
                    : isCompleted
                      ? 'bg-primary border-primary text-primary-foreground'
                      : 'bg-background border-muted text-muted-foreground',
                )}
              >
                {isCompleted ? (
                  <Check className="h-5 w-5" />
                ) : (
                  <span>{index + 1}</span>
                )}
              </div>

              <div className="mt-4 text-center px-2">
                <p
                  className={cn(
                    'text-sm font-bold transition-colors',
                    isActive ? 'text-foreground' : 'text-muted-foreground',
                  )}
                >
                  {step.title}
                </p>
                {step.description && (
                  <p className="text-[11px] text-muted-foreground mt-1 line-clamp-1 max-w-[120px] mx-auto hidden md:block">
                    {step.description}
                  </p>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}