
✅ Usage Examples
🔹 Text Input
<FormField
  name="name"
  label="Name*"
  placeholder="Enter name"
  register={register}
  errors={errors}
  rules={{ required: "Name is required" }}
/>

🔹 Email
<FormField
  type="email"
  name="email"
  label="Email*"
  register={register}
  errors={errors}
  rules={{ required: "Email required" }}
/>

🔹 Select (react-select)
<FormField
  type="select"
  name="modules_id"
  label="Module*"
  control={control}
  errors={errors}
  options={module}
  rules={{ required: "Select module" }}
/>

🔹 Textarea
<FormField
  type="textarea"
  name="about"
  label="About"
  register={register}
  errors={errors}
/>

🔹 Checkbox
<FormField
  type="checkbox"
  name="agree"
  label="I Agree"
  register={register}
  errors={errors}
  rules={{ required: "You must agree" }}
/>

🔹 Radio
<FormField
  type="radio"
  name="gender"
  label="Gender"
  register={register}
  errors={errors}
  options={[
    { label: "Male", value: "M" },
    { label: "Female", value: "F" },
  ]}
/>

🔹 File Upload
<FormField
  type="file"
  name="document"
  label="Upload File"
  register={register}
  errors={errors}
/>

🔹 Rich Text Editor (Jodit)
<FormField
  type="editor"
  name="description"
  label="Description*"
  control={control}
  errors={errors}
  setValue={setValue}
  trigger={trigger}
  rules={{ required: "Description is required" }}
  colClass="col-md-12 mt-3"
/>



🔹 Image For Add 

<FormField
  type="image"
  name="image"
  label="Image*"
  register={register}
  errors={errors}
  accept=".jpg,.jpeg,.png"
  preview={true}
  imageFile={imageFile}
  rules={{
    required: "Image is required",
    validate: (value) => {
      if (!value?.length) return true;

      const file = value[0];
      const valid = ["jpg", "jpeg", "png"];
      const ext = file.name.split(".").pop().toLowerCase();

      if (!valid.includes(ext)) {
        return `Only ${valid.join(", ")} allowed`;
      }

      if (file.size / 1024 > 500) {
        return "Image size must be under 500kb";
      }
    },
  }}
/>


🔹 Image For Edit 
<FormField
  type="image"
  name="image"
  label="Image*"
  register={register}
  errors={errors}
  accept=".jpg,.jpeg,.png"
  preview={true}
  imageFile={imageFile}
  rules={{
    // required: "Image is required",
    validate: (value) => {
      if (!value?.length) return true;

      const file = value[0];

      if (typeof file !== "string") {
        const valid = ["jpg", "jpeg", "png"];
        const ext = file?.name
          ?.split(".")
          .pop()
          .toLowerCase();
        if (!valid.includes(ext)) {
          return `Only ${valid.join(", ")} allowed`;
        }
      }
    },
  }}
/>