import { ChevronRight, CircleCheckBigIcon, CircleIcon, MessageCircleWarningIcon } from 'lucide-react';

type SectionSidebarStep = {
    title: string;
    description?: string;
    state?: 'valid' | 'invalid' | 'neutral';
};

type SectionSidebarProps = {
    steps: SectionSidebarStep[];
    currentIndex: number;
    onSelect: (index: number) => void;
};

export default function SectionSidebar({ steps, currentIndex, onSelect }: SectionSidebarProps) {
    return (
        <ol className="relative flex w-full flex-col border-s border-gray-200 text-gray-500 md:w-1/4">
            {steps.map((step, index) => (
                <li key={index} className="ms-6 mb-10 flex items-center">
                    {step.state === 'valid' ? (
                        <CircleCheckBigIcon className="h-6 w-6 flex-shrink-0 text-green-600" aria-hidden="true" />
                    ) : step.state === 'invalid' ? (
                        <MessageCircleWarningIcon className={`h-6 w-6 flex-shrink-0 text-yellow-600`} aria-hidden="true" />
                    ) : (
                        <CircleIcon className="h-6 w-6 flex-shrink-0 text-gray-300" aria-hidden="true" />
                    )}

                    <div className="ms-4 flex cursor-pointer flex-col items-start" onClick={() => onSelect(index)}>
                        <h3
                            className={`leading-tight font-medium ${currentIndex === index || step.state === 'valid' ? 'text-primary font-semibold' : 'text-gray-400'}`}
                        >
                            {step.title}
                        </h3>
                        <p className={`text-sm ${currentIndex === index || step.state === 'valid' ? 'text-primary font-medium' : 'text-gray-400'}`}>
                            {step.description}
                        </p>
                    </div>
                    {/* right icon when currentIndex is index */}
                    {currentIndex === index && <ChevronRight className="text-primary h-4 w-4 flex-shrink-0" aria-hidden="true" />}
                </li>
            ))}
        </ol>
    );
}