'use client';

import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { cn } from '@/lib/utils';
import { Controller, useFormContext } from 'react-hook-form';

interface IProps {
	name: string;
	label: string;
	options: {
		label: string;
		value: string | number;
	}[];
	isRequired?: boolean;
}

const RHFStyledRadioGroup = ({
	name,
	label,
	options,
	isRequired = true,
}: IProps) => {
	const { control, clearErrors } = useFormContext();

	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => (
				<div className="space-y-1 relative">
					{/* Label */}
					<Label className="text-xs font-medium mb-1 block">
						{label}
						{isRequired ? (
							<span className="text-red-500 align-middle">*</span>
						) : (
							<span className="text-gray-400 font-normal text-[10px]">
								(optional)
							</span>
						)}
					</Label>

					{/* Radio Group */}
					<RadioGroup
						value={field.value}
						onValueChange={(value) => {
							field.onChange(value);
							clearErrors(name);
						}}
						className={cn(
							'flex flex-row gap-2 overflow-x-auto no-scrollbar py-2',
							error && 'border border-red-500 p-2 rounded-md'
						)}
					>
						{options.map((option) => {
							const isSelected = option.value !== field.value;

							return (
								<div
									key={option.value}
									className={cn(
										'min-w-[163px] h-[73px] px-4 py-4 rounded-2xl border flex items-center',
										isSelected
											? 'border-[#E7E7E7] bg-white'
											: 'border-primary bg-[#F5FAEB]'
									)}
								>
									<div className="flex items-center space-x-2">
										<RadioGroupItem
											id={`${name}-${option.value}`}
											value={String(option.value)}
										/>
										<Label
											htmlFor={`${name}-${option.value}`}
											className="cursor-pointer"
										>
											{option.label}
										</Label>
									</div>
								</div>
							);
						})}
					</RadioGroup>

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

export default RHFStyledRadioGroup;