import React, { useRef } from "react";
import { cn } from "@/lib/utils";
import { Check } from "lucide-react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

interface Step {
    number: number;
    label: string;
}

interface StepperProps {
    steps: Step[];
    currentStep: number;
    onStepClick: (stepNumber: number) => void;
}

const Stepper: React.FC<StepperProps> = ({
    steps,
    currentStep,
    onStepClick,
}) => {
    const scrollAreaRef = useRef<HTMLDivElement | null>(null);

    const scrollToCurrentStep = (stepIndex: number) => {
        const scrollArea = scrollAreaRef.current;
        if (scrollArea && scrollArea.children.length) {
            const stepElement = scrollArea.children[stepIndex] as HTMLElement;

            if (stepElement) {
                stepElement.scrollIntoView({
                    behavior: "smooth",
                    block: "center",
                    inline: "center",
                });
            }
        }
    };

    React.useEffect(() => {
        scrollToCurrentStep(currentStep - 1);
    }, [currentStep]);

    return (
        <ScrollArea
            className="w-full whitespace-nowrap rounded-md antialiased py-4"
            dir="ltr"
            style={{
                WebkitFontSmoothing: 'antialiased',
                MozOsxFontSmoothing: 'grayscale',
                textRendering: 'optimizeLegibility'
            }}
        >
            <div className="flex items-center justify-center" ref={scrollAreaRef}>
                {steps.map((step, index) => (
                    <div
                        key={step.number}
                        className="flex flex-col items-center"
                    >
                        <div className="flex items-center">
                            <div className="flex flex-col items-center justify-center">
                                <div
                                    onClick={() => onStepClick(step.number)}
                                    className={cn(
                                        "w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold cursor-pointer transform-gpu",
                                        step.number === currentStep
                                            ? "bg-primary text-primary-foreground shadow-sm"
                                            : step.number < currentStep
                                            ? "bg-primary text-primary-foreground"
                                            : "bg-secondary text-secondary-foreground"
                                    )}
                                    // style={{
                                    //     backfaceVisibility: 'hidden'
                                    // }}
                                >
                                    {step.number < currentStep ? (
                                        <Check className="w-6 h-6" />
                                    ) : (
                                        step.number
                                    )}
                                </div>
                                <div
                                    className={cn(
                                        "mt-2 text-xs text-center w-20 antialiased",
                                        step.number === currentStep
                                            ? "text-black dark:text-primary font-bold"
                                            : "text-black dark:text-primary"
                                    )}
                                >
                                    {step.label}
                                </div>
                            </div>
                            {index < steps.length - 1 && (
                                <div
                                    className={cn(
                                        "w-16 h-[2px] mb-5 -mx-5",
                                        step.number <= currentStep
                                            ? "bg-primary"
                                            : "bg-slate-200"
                                    )}
                                />
                            )}
                        </div>
                    </div>
                ))}
            </div>
            <ScrollBar orientation="horizontal" />
        </ScrollArea>
    );
};

export default Stepper;