'use client';

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

interface RHFCheckboxProps {
	name: string;
	label: string;
	description?: string;
	disabled?: boolean;
}

const RHFCheckbox = ({
	name,
	label,
	description,
	disabled,
}: RHFCheckboxProps) => {
	const { control } = useFormContext();

	return (
		<Controller
			name={name}
			control={control}
			render={({ field }) => (
				<div>
					<Label
						htmlFor={name}
						className="flex items-center gap-3 cursor-pointer text-[#EDEBE6]"
					>
						<Checkbox
							id={name}
							checked={field.value}
							onCheckedChange={(val) => field.onChange(val)}
							disabled={disabled}
							className="
                bg-[#1A1612]
                border-[#3A332C]
                data-[state=checked]:bg-[#CBB26A]
                data-[state=checked]:border-[#CBB26A]
                data-[state=checked]:text-[#110D09]
                focus-visible:ring-2 
                focus-visible:ring-[#CBB26A]/30
                focus-visible:ring-offset-0
              "
						/>

						<div className="flex flex-col gap-1">
							<span className="text-[#EDEBE6] font-normal text-[13px]">
								{label}
							</span>

							{description && (
								<span className="text-[13px] text-[#B8B2A8] leading-normal">
									{description}
								</span>
							)}
						</div>
					</Label>
				</div>
			)}
		/>
	);
};

export default RHFCheckbox;