hero

import styles from "./hero.module.scss";
import Link from "next/link";
import Image from "@/components/atoms/Image";
import NavigationIcons from "@/components/molecules/NavigationIcons";

const Hero = ({ data }) => {
  const parse = require("html-react-parser");

  return (
    <div className={styles.component}>
      <div className={data?.type === "fullwidth" ? styles.image_fullwidth : styles.image}>
        <Image
          src={data?.image?.url || "/"}
          width={data?.image?.width}
          height={data?.image?.height}
          alt={data?.image?.alt}
          objectFit="cover"
          objectPosition="center center"
          layout="fill"
        />
      </div>
      {data?.type === "fullwidth" ? null : (
        <div className={styles.component_content}>
          <div className={styles.component_content_content}>
            <div className={styles.overlay} />
            <div className={`${styles.tag} font-regular-ext`}>{data?.custom_pre_title}</div>
            <div className={`${styles.title} font-light-ext`}>{data?.title}</div>
            {data?.titleSecondary && (
              <div className={`${styles.titleSecondary} font-light-ext`}>{data?.titleSecondary}</div>
            )}

            <div className={styles.description}>{parse(data?.text)}</div>
            {data?.outro && <div className={styles.outro}>{data?.outro}</div>}

            {data?.socials && (
              <div className={styles.socials}>
                <NavigationIcons icons={data?.socials} className={styles.socials_icons} />
              </div>
            )}
            {data.ctas &&
              data.ctas.map((cta, index) => (
                <div className={styles.button} key={index}>
                  <Link href={cta.link_internal || cta.link_external} passHref>
                    {cta.label}
                  </Link>
                </div>
              ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Hero;