// components/CheckboxField.tsx
import React from "react";
import { useField } from "formik";

interface Props {
  name: string;
  label: string;
}

const CheckboxField: React.FC<Props> = ({ name, label }) => {
  const [field, meta] = useField({ name, type: "checkbox" });
  const isError = meta.touched && meta.error;

  return (
    <div className="form-check col-lg-3 col-md-6 col-12">
      <input
        type="checkbox"
        {...field}
        checked={field.value}
        className={`form-check-input ${isError ? "is-invalid" : ""}`}
        id={name}
      />
      <label className="form-check-label" htmlFor={name}>
        {label}
      </label>
      {isError && <div className="text-danger px-2 error-box">{meta.error}</div>}
    </div>
  );
};

export default CheckboxField;