import ImageBox from "./ImageBox";
import Link from "next/link";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import PopularSearch from "./PopularSearch";
import SearchForm from "../common/job-search/SearchForm";
import type { Container, Engine } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";
import { useEffect, useState } from "react";

const Hero = () => {
  const [init, setInit] = useState(false);
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadSlim(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = (container: Container | undefined): Promise<void> => {
    return new Promise((resolve) => {
      console.log(container);
      resolve();
    });
  };
  return (
    <>
      <section className="banner-section-two">
        {init && (
          <Particles
            id="tsparticles"
            particlesLoaded={particlesLoaded}
            options={{
              background: {
                color: {
                  value: "#0d47a1", //or #0c5230
                },
              },
              fpsLimit: 300,
              interactivity: {
                events: {
                  onClick: {
                    enable: true,
                    mode: "push",
                  },
                  onHover: {
                    enable: true,
                    mode: "repulse",
                  },
                  // resize: true,
                },
                modes: {
                  push: {
                    quantity: 4,
                  },
                  repulse: {
                    distance: 200,
                    duration: 0.4,
                  },
                },
              },
              particles: {
                color: {
                  value: "#ffffff",
                },
                links: {
                  color: "#ffffff",
                  distance: 150,
                  enable: true,
                  opacity: 0.5,
                  width: 1,
                },
                move: {
                  direction: "none",
                  enable: true,
                  outModes: {
                    default: "bounce",
                  },
                  random: false,
                  speed: 4,
                  straight: false,
                },
                number: {
                  density: {
                    enable: true,
                    // area: 800,
                  },
                  value: 80,
                },
                opacity: {
                  value: 0.5,
                },
                shape: {
                  type: "circle",
                },
                size: {
                  value: { min: 1, max: 5 },
                },
              },
              detectRetina: true,
            }}
          />
        )}
        <div className="auto-container">
          <div className="row">
            <div className="content-column col-lg-7 col-md-12 col-sm-12">
              <div className="inner-column wow fadeInUp" data-aos="fade-up">
                <div className="title-box">
                  <h3>
                    Find Your Perfect Job <br />
                    Match
                  </h3>
                  <div className="text">
                    Find Jobs, Employment & Career Opportunities
                  </div>
                </div>

                {/* <!-- Job Search Form --> */}
                <div className="job-search-form">
                  <SearchForm />
                </div>
                {/* <!-- Job Search Form --> */}

                {/* <!-- Popular Search --> */}
                <PopularSearch />
                {/* <!-- End Popular Search --> */}

                <div className="bottom-box">
                  <div className="count-employers">
                    <span className="title">10k+ Candidates</span>
                    <img src="/images/resource/multi-peoples.png" alt="" />
                  </div>
                  <Link
                    href="/candidates-dashboard/cv-manager"
                    className="upload-cv"
                    id="hero_upload_cv"
                  >
                    <span className="icon flaticon-file"></span> Create your CV
                  </Link>
                </div>
              </div>
            </div>
            {/* End content-column */}

            <div className="image-column col-lg-5 col-md-12">
              <ImageBox />
            </div>
          </div>
          {/* End .row */}
        </div>
        {/* End auto-container */}
      </section>
    </>
  );
};

export default Hero;