"use client";

import React from "react";
import Link from "next/link";
import { Field, ErrorMessage } from "formik";

export function PrivacyConsentField() {
  return (
    <div className="col-md-12 col-12">
      <div className="border-top border-color-light4 pt-3 my-3"></div>
      <div className="form-check">
        <Field
          id="privacyConsent"
          className="form-check-input"
          type="checkbox"
          name="privacyConsent"
        />
        <label htmlFor="privacyConsent" className="form-check-label ">
          I agree to be contacted and for my information to be reviewed per the{" "}
          <Link
            prefetch={false}
            href="/privacy-policy"
            className="no-bg-btn m-0 p-0 color-black fw-500"
          >
            <b> Privacy Policy</b>
          </Link>
          .
        </label>
      </div>
      <ErrorMessage
        name="privacyConsent"
        component="div"
        className="invalid-feedback d-block"
      />
    </div>
  );
}

export function ApplyFormStatus({
  apiError,
  successMessage,
}: {
  apiError: string;
  successMessage: string;
}) {
  return (
    <>
      {apiError && <div className="col-12 text-danger">{apiError}</div>}

      {successMessage && (
        <div className="col-12 text-success">{successMessage}</div>
      )}
    </>
  );
}

export function ApplySubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
  return (
    <div className="col-md-12 col-12">
      <button
        type="submit"
        className="button-style btn-gradient1 py-2 px-5 mt-2"
        disabled={isSubmitting}
      >
        <span>{isSubmitting ? "Processing..." : "Submit"}</span>
      </button>
    </div>
  );
}