/**
 * External Dependencies
 */
import { Check } from 'lucide-react';

/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';

export function StepNav( { steps, step, maxStep, onGoto } ) {
	return (
		<div className="border-b border-border bg-white px-8">
			<ol className="m-0 flex flex-wrap gap-x-3 gap-y-1 list-none p-0">
				{ steps.map( ( s, i ) => {
					const current = i === step;
					const done = i < step;
					const reachable = i <= maxStep;
					const clickable = reachable && ! current;

					return (
						<li key={ s.id } className="m-0 min-w-28 flex-1">
							<button
								type="button"
								onClick={
									clickable ? () => onGoto( i ) : undefined
								}
								aria-current={ current ? 'step' : undefined }
								disabled={ ! clickable }
								className={ clsx(
									'flex w-full items-center gap-2.5 border-0 border-b-2 bg-transparent pt-4 pb-3 text-left',
									current
										? 'border-primary'
										: 'border-transparent',
									clickable
										? 'cursor-pointer'
										: 'cursor-default',
									! reachable && 'opacity-55'
								) }
							>
								<span
									className={ clsx(
										'flex size-7 shrink-0 items-center justify-center rounded-full border text-sm font-semibold',
										done || current
											? 'border-primary bg-primary text-white'
											: 'border-gray-200 bg-gray-100 text-gray-500'
									) }
								>
									{ done ? (
										<Check
											className="size-3.5"
											strokeWidth={ 3 }
										/>
									) : (
										i + 1
									) }
								</span>
								<span className="flex flex-col items-start leading-tight">
									<span
										className={ clsx(
											'text-lg',
											current
												? 'font-bold text-gray-900'
												: 'font-medium text-gray-600'
										) }
									>
										{ s.label }
									</span>
									<span className="text-sm text-gray-400">
										{ s.hint }
									</span>
								</span>
							</button>
						</li>
					);
				} ) }
			</ol>
		</div>
	);
}