import React, { FC, useState } from "react";
import LoginWithSocial from "./LoginWithSocial";
import Form from "./FormContent";
import Link from "next/link";
import EmployerForm from "./EmployerForm";

const Register: FC = () => {
  const [getIsCandidate, setIsCandidate] = useState<boolean>(true);
  return (
    <div className="form-inner">
      <h3>Create a Free Account</h3>

      <div>
        <div className="form-group register-dual">
          <div className="btn-box row">
            <div className="col-lg-6 col-md-12">
              <button
                className={`theme-btn ${!getIsCandidate && "btn-style-four"} ${getIsCandidate && "btn-style-one"}`}
                onClick={() => setIsCandidate(true)}
              >
                <i className="la la-user"></i> Candidate
              </button>
            </div>

            <div className="col-lg-6 col-md-12">
              <button
                className={`theme-btn ${getIsCandidate && "btn-style-four"} ${!getIsCandidate && "btn-style-one"}`}
                onClick={() => setIsCandidate(false)}
              >
                <i className="la la-briefcase"></i> Employer
              </button>
            </div>
          </div>
        </div>

        <div>{getIsCandidate ? <Form /> : <EmployerForm />}</div>
      </div>

      <div className="bottom-box">
        <div className="text">
          Already have an account?{" "}
          <Link
            href="#"
            className="call-modal login"
            data-bs-toggle="modal"
            data-bs-dismiss="modal"
            data-bs-target="#loginPopupModal"
          >
            LogIn
          </Link>
        </div>
        <div className="divider">
          <span>or</span>
        </div>
        <LoginWithSocial />
      </div>
    </div>
  );
};

export default Register;