import { Check } from 'lucide-react';
import { Fragment } from 'react';
import { cn } from '@/lib/utils';

const steps = ['Email', 'Verify code', 'New password'];

export default function ResetSteps({ current }: { current: number }) {
    return (
        <ol className="mb-8 flex items-center">
            {steps.map((label, index) => {
                const done = index < current;
                const active = index === current;

                return (
                    <Fragment key={label}>
                        {index > 0 && (
                            <li
                                aria-hidden
                                className={cn(
                                    'mx-2 h-px flex-1 transition-colors',
                                    index <= current
                                        ? 'bg-gold'
                                        : 'bg-navy/10 dark:bg-white/10',
                                )}
                            />
                        )}
                        <li
                            aria-current={active ? 'step' : undefined}
                            className="flex items-center gap-2"
                        >
                            <span
                                className={cn(
                                    'flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-colors',
                                    done && 'bg-gold text-white',
                                    active &&
                                        'bg-navy text-white ring-4 ring-gold/25 dark:bg-white dark:text-navy',
                                    !done &&
                                        !active &&
                                        'bg-gray-100 text-gray-400 dark:bg-ink-soft dark:text-white/40',
                                )}
                            >
                                {done ? (
                                    <Check
                                        className="size-3.5"
                                        strokeWidth={3}
                                    />
                                ) : (
                                    index + 1
                                )}
                            </span>
                            <span
                                className={cn(
                                    'hidden text-xs font-medium whitespace-nowrap sm:inline',
                                    active
                                        ? 'text-navy dark:text-white'
                                        : 'text-gray-400 dark:text-white/40',
                                )}
                            >
                                {label}
                            </span>
                        </li>
                    </Fragment>
                );
            })}
        </ol>
    );
}