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

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

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

    return (
        <div>
            <div className="m-2 p-2 flex flex-row">
                <div>
                    <Label htmlFor="active">
                        <span>{label}</span>
                    </Label>
                </div>
                <Checkbox
                    id={field.name}
                    checked={field.state.value}
                    onCheckedChange={(checked) => {
                        field.handleChange(checked === true);
                    }}
                    onBlur={field.handleBlur}
                />
            </div>
            <FieldErrors meta={field.state.meta} />
        </div>
    );
};
