import { Label } from '@/components/ui/label';
import { Controller, useFormContext } from 'react-hook-form';

interface IProps {
	name: string;
	label: string;
}

const RHFStyledNumberSelector = ({
	name,
	label,
}: IProps & React.InputHTMLAttributes<HTMLInputElement>) => {
	const { control } = useFormContext();

	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => (
				<div className="space-y-1 relative w-full">
					{/* Label */}
					<Label className="text-xs font-medium mb-1 block">{label}</Label>

					{/* Number Selector */}
					<div className="flex flex-row gap-2 overflow-x-auto max-w-full no-scrollbar">
						{[...Array(10)].map((_, index) => {
							const value = index; // 0 = None
							const isSelected = Number(field.value) === value;

							return (
								<button
									key={index}
									type="button"
									onClick={() => field.onChange(value)}
									className={`
                    flex items-center justify-center w-20 h-12 
                    rounded-[10px] border text-sm font-medium
                    transition-all duration-200 shrink-0
                    ${
								isSelected
									? 'bg-primary text-white border-primary'
									: 'bg-white text-[#888888] border-[#E7E7E7]'
							}
                  `}
								>
									{index === 0 ? 'None' : value}
								</button>
							);
						})}
					</div>

					{/* Error message */}
					{error && (
						<p className="text-red-500 text-xs mt-1">{error.message}</p>
					)}
				</div>
			)}
		/>
	);
};

export default RHFStyledNumberSelector;