import { Controller, useFormContext } from 'react-hook-form';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
import { CheckCircle, Circle } from 'lucide-react';

interface Option {
	label: string;
	value: string | number;
}

interface Props {
	name: string;
	label: string;
	isLoading?: boolean;
	options: Option[];
	isRequired?: boolean;
	className?: string;
}

const RHFSelectCardGroup = ({
	name,
	label,
	options,
	isLoading = false,
	isRequired = true,
	className = '',
}: Props) => {
	const { control } = useFormContext();

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

					{/* Cards container */}
					<div className="flex flex-row gap-2 max-w-full overflow-x-auto no-scrollbar py-1">
						{isLoading ? (
							<div className="flex flex-row gap-2">
								{[...Array(5)].map((_, index) => (
									<div
										key={index}
										className="w-24 sm:w-28 md:w-32 lg:w-36 h-16 sm:h-18 md:h-20 rounded-md bg-gray-200 animate-pulse shrink-0"
									></div>
								))}
							</div>
						) : (
							options.map((opt) => {
								const selected = field.value === opt.value;

								return (
									<button
										type="button"
										key={opt.value}
										onClick={() => field.onChange(opt.value)}
										className={cn(
											'shrink-0 py-2 px-3 sm:py-3 sm:px-4 rounded-xl flex items-center gap-2 min-w-[90px] xs:min-w-[100px] sm:min-w-[120px] md:min-w-[140px] lg:min-w-[160px]',
											selected
												? 'border-primary border bg-[#F5FAEB]'
												: 'border border-gray-300 bg-white hover:border-gray-400'
										)}
									>
										{selected ? (
											<CheckCircle className="w-5 h-5 text-primary" />
										) : (
											<Circle className="w-5 h-5 text-gray-400" />
										)}
										<span className="text-xs sm:text-sm md:text-base truncate">
											{opt.label}
										</span>
									</button>
								);
							})
						)}
					</div>

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

export default RHFSelectCardGroup;