import React from 'react';

interface ProgressStepProps {
    number: number;
    title: string;
    isActive?: boolean;
    isCompleted?: boolean;
}

interface FigmaProgressProps {
    steps: ProgressStepProps[];
    currentStep?: number;
    className?: string;
}

const ProgressStep: React.FC<ProgressStepProps> = ({ number, title, isActive = false, isCompleted = false }) => {
    const stepClasses = isActive
        ? "p-2 bg-[--Neutrals-NeutralSlate50] rounded-[10px] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]"
        : "p-2 bg-white rounded-[10px]";

    const numberClasses = isActive || isCompleted
        ? "h-5 p-0.5 bg-[--Brand-Orange] rounded-[999px]"
        : "h-5 p-0.5 bg-[--Neutrals-NeutralSlate0] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200]";

    const numberTextClasses = isActive || isCompleted
        ? "w-4 text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none"
        : "w-4 text-center justify-start text-[--Neutrals-NeutralSlate600] text-xs font-medium font-['Inter'] leading-none";

    const titleClasses = isActive
        ? "flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight"
        : "flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-normal font-['Inter'] leading-tight";

    return (
        <div className={`self-stretch inline-flex justify-start items-center gap-2.5 overflow-hidden ${stepClasses}`}>
            <div className={`inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${numberClasses}`}>
                <div className={numberTextClasses}>{number}</div>
            </div>
            <div className={titleClasses}>{title}</div>
        </div>
    );
};

export const FigmaProgress: React.FC<FigmaProgressProps> = ({ steps, currentStep = 1, className = '' }) => {
    return (
        <div className={`self-stretch inline-flex flex-col justify-start items-start gap-2 ${className}`}>
            {steps.map((step, index) => (
                <ProgressStep
                    key={index}
                    number={step.number}
                    title={step.title}
                    isActive={step.number === currentStep}
                    isCompleted={step.number < currentStep}
                />
            ))}
        </div>
    );
};

// Default onboarding steps as shown in Figma
export const defaultOnboardingSteps: ProgressStepProps[] = [
    { number: 1, title: "Company Overview & Vision" },
    { number: 2, title: "Leadership & Organizational Structure" },
    { number: 3, title: "Operations & Execution" },
    { number: 4, title: "Culture & Team Health" },
    { number: 5, title: "Sales, Marketing & Growth" },
    { number: 6, title: "Financial Health & Metrics" },
    { number: 7, title: "Innovation & Product/Service Strategy" },
    { number: 8, title: "Personal Leadership & Risk" }
];

export default FigmaProgress;