import {
  useNavigate
} from "react-router-dom";

const EmploymentDetailsPlaceholder = () => {
  const navigate =
    useNavigate();

  return (
    <div className="form-page-card">
      <div className="form-page-heading">
        <div>
          <span>
            Section B
          </span>

          <h2>
            Employment Details
          </h2>

          <p>
            The employment details section
            will be implemented next.
          </p>
        </div>

        <span className="form-step-badge">
          Step 2 of 8
        </span>
      </div>

      <div className="information-banner">
        Your personal details have been
        saved successfully.
      </div>

      <button
        type="button"
        className="secondary-button"
        onClick={() =>
          navigate(
            "/staff/form/personal-details"
          )
        }
      >
        Return to personal details
      </button>
    </div>
  );
};

export default EmploymentDetailsPlaceholder;