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>
        <div className="human-capital-banner py-5">
          <div className="container">
            <Fade>
              <p className="text-white text-center fw-bold fs-1 mb-4">
                Hire with confidence and work with people you can trust
              </p>
              <h4 className="text-white text-center fs-5">
                Access a growing pool of NIN-verified job-seekers and know
                exactly who you're hiring
              </h4>
              <div className="py-4 pb-0 d-flex align-items-center justify-content-center 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/all-applicants" className="hc_button">
                    {" "}
                    Get Started
                  </Link>
                )}
              </div>
            </Fade>
          </div>
        </div>
        <div className="hero-section-video">
          <div className="container d-flex justify-content-center align-items-center pt-5 pb-5">
            <div className="col-lg-8 col-md-8 col-sm-12">
              <iframe
                width="100%"
                height="500"
                src="https://www.youtube.com/embed/MYtrRmrgZY4?autoplay=1&mute=1"
                title="YouTube video player"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              ></iframe>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default HCHero;