import { Label } from "@radix-ui/react-label";
import { useFieldContext } from "..";
import { FieldErrors } from "./FieldErrors";
import { Checkbox } from "../../../components/ui/checkbox";

type CheckboxFieldProps = {
    label: string;
    description?: string;
};

export const CheckboxField = ({ label }: CheckboxFieldProps) => {
    const field = useFieldContext<boolean>();

    return (
        <div>
            <div className="flex items-center gap-3">
                <Label htmlFor={field.name}>
                    <span>{label}</span>
                </Label>

                <Checkbox
                    id={field.name}
                    checked={field.state.value}
                    onCheckedChange={(checked) => {
                        field.handleChange(checked === true);
                    }}
                    onBlur={field.handleBlur}
                />
            </div>
            <FieldErrors meta={field.state.meta} />
        </div>
    );
};
