"use client";

/**
 * Single Select Field
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:85-109
 * Renders a radio card group for single selection
 */

import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import {
	OnboardingRadioCardGroup,
	OnboardingRadioCardIndicator,
	OnboardingRadioCardItem,
} from "../primitives/onboarding-radio-card";
import type { SingleSelectFieldProps } from "../types/fields";

export function SingleSelectField({
	options,
	value,
	onChange,
	ariaLabel,
	disabled = false,
}: SingleSelectFieldProps) {
	return (
		<fieldset disabled={disabled}>
			<legend className="sr-only">{ariaLabel}</legend>
			<OnboardingRadioCardGroup
				value={value}
				onValueChange={onChange}
				required
				aria-label={ariaLabel}
			>
				{options.map((option, index) => (
					<div
						className={ANIMATION_CLASSES.fadeInUp}
						key={option.value}
						style={getStaggerStyle(
							index,
							STAGGER_PRESETS.selectOptions.baseDelay,
							STAGGER_PRESETS.selectOptions.increment,
							STAGGER_PRESETS.selectOptions.duration,
						)}
					>
						<OnboardingRadioCardItem
							className="active:scale-[99%]"
							value={option.value}
						>
							<div className="flex items-center gap-2.5">
								<OnboardingRadioCardIndicator />
								<span className="block sm:text-sm">{option.label}</span>
							</div>
						</OnboardingRadioCardItem>
					</div>
				))}
			</OnboardingRadioCardGroup>
		</fieldset>
	);
}