import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/shared/ui/form";
import React from "react";
import { useFormContext } from "react-hook-form";
import { Checkbox } from "@/shared/ui/checkbox";
import { CheckboxProps } from "@radix-ui/react-checkbox";
import { useTranslations } from "next-intl";

export interface FormCheckboxProps extends CheckboxProps {
  label?: React.ReactNode | string;
  name: string;
  required?: boolean;
  className?: string;
  onCheckedChange?: (checked: boolean) => void;
}

const FormCheckbox: React.FC<FormCheckboxProps> = ({
  name,
  label,
  className,
  required,
  onCheckedChange,
  ...props
}) => {
  const form = useFormContext();
  const t = useTranslations("LABELS");
  return (
    <FormField
      control={form.control}
      name={name}
      render={({ field }) => (
        <FormItem>
          <FormControl>
            <label
              htmlFor={name}
              className="flex items-center gap-2 text-sm font-medium   leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mx-2"
            >
              <Checkbox
                id={name}
                checked={field.value}
                onCheckedChange={onCheckedChange || field.onChange}
                required={required ? true : false}
                className={className}
              />
              <FormLabel className="-mt-[3px]">
                {typeof label === "string" ? t(label) : label}
              </FormLabel>
            </label>
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
};

export default FormCheckbox;