import Link from "next/link";
import { useContext } from "react";
import { Fade } from "react-awesome-reveal";
import { AuthContext } from "../../contexts/auth";
import { AuthContextType } from "../..";

const HCHero = () => {
  const { isAuthenticated, userRole } = useContext(
    AuthContext
  ) as AuthContextType;

  return (
    <>
      <section className=" human-capital-banner">
        <div className="container">
          <div className="row ">
            <div className="content-column col-lg-7 col-md-12 col-sm-12">
              <div
                className="inner-column h-100 wow fadeInUp d-flex align-items-center"
                data-aos="fade-up "
              >
                <Fade>
                  <div className="title-box">
                    <h1 className="text-white extra-large-text">
                      Unlock the door to your <span>dream job</span>
                    </h1>
                    <div className="text-white mt-2">
                      <h4>Explore opportunities</h4>
                      <p className="text-white">
                        Step into a world of opportunities at Jobrator, where
                        unlocking the door to your dream job is just a click
                        away. Embrace a career journey that's uniquely yours.
                        We're not just matching skills but igniting passions.
                      </p>

                      <div className="py-5 d-flex gap-3 banner-buttons">
                        {!isAuthenticated && (
                          <Link href="/login" className="hc_button">
                            {" "}
                            Get Started
                          </Link>
                        )}
                        {isAuthenticated && userRole === "Candidate" && (
                          <Link href="/jobs" className="hc_button">
                            {" "}
                            Get Started
                          </Link>
                        )}
                        {isAuthenticated && userRole === "Company" && (
                          <Link href="/dashboard" className="hc_button">
                            {" "}
                            Get Started
                          </Link>
                        )}
                        {/* <Link href="/login" className="hc_button_transparent">
                          {" "}
                          for employers
                        </Link> */}
                      </div>
                    </div>
                  </div>
                </Fade>
              </div>
            </div>
            {/* End content-column */}

            <div className="image-column col-lg-5 col-md-12">
              <Fade>
                <div className="d-flex h-100 align-items-end human-capital-banner-wrapper">
                  <img src="/images/banner-woman.png" alt="" />
                </div>
              </Fade>
            </div>
          </div>
          {/* End .row */}
        </div>
        {/* End auto-container */}
      </section>
    </>
  );
};

export default HCHero;