Cognitive Accessibility

// Linear Stepper reducing cognitive memory load in forms
import React from "react";
import { Check } from "lucide-react";

export function LinearStepper({ steps, currentStep }) {
  return (
    <div className="w-full" aria-label="விண்ணப்ப முன்னேற்றம் (Application Progress)">
      <div className="relative flex justify-between w-full">
        {steps.map((step, index) => {
          const isCompleted = index < currentStep;
          const isActive = index === currentStep;
          
          return (
            <div key={step.title} className="flex flex-col items-center flex-1 relative z-10">
              <div className={`size-10 rounded-full border-2 flex items-center justify-center font-bold text-sm transition-all ${
                isCompleted ? "border-success bg-success text-success-foreground" :
                isActive ? "border-primary bg-primary text-primary-foreground" :
                "border-border bg-muted text-muted-foreground"
              }`}>
                {isCompleted ? <Check className="size-4" /> : index + 1}
              </div>
              
              <div className="mt-2 text-center">
                <p className="text-xs font-semibold text-foreground m-0">{step.title}</p>
                <p className="text-[10px] text-muted-foreground m-0 font-tamil" lang="ta">{step.titleTa}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}