import React, { useEffect, useRef } from "react";
import Lottie from "lottie-web";
import animationData from "../components/astronaout.json";
import { FRONT_PAGE_DESC, FRONT_PAGE_NAME } from "../components/root.link.jsx";

function Hero() {
  const container = useRef(null);

  useEffect(() => {
    Lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData
    });
  }, []);

  return (
    <section className="patterns mb-10 flex flex-col flex-wrap space-y-16 px-5 md:space-y-0">
      <div className="ml-auto w-72 md:w-96 lg:w-2/5">
        <div className="container" ref={container} />
      </div>
      <div className="mb-auto max-w-md space-y-5">
        <h1 className="text-5xl font-bold md:text-7xl">
          Hi there. I’m {FRONT_PAGE_NAME}
        </h1>
        <p className="leading-relaxed tracking-wide">{FRONT_PAGE_DESC} </p>
      </div>
    </section>
  );
}

export default Hero;
