"use client";
/* 
  this is the hero banner component for the home page.
*/
import { HeroBanner as HeroBannerPropsType } from "@/src/types/StaticContent/home.content.type";
import Routes from "@/src/utils/RouteConstants";
import Link from 'next/link';
import React from "react";
import styles from "./HeroBanner.module.scss";

// Define the static content type for the HeroBanner component
interface HeroBannerProps {
  HeroBanner: HeroBannerPropsType;
}

const HeroBanner: React.FC<HeroBannerProps> = ({ HeroBanner }) => {

  return (
    <section className={`${styles.HeroBannerWrapper} w-full relative mt-[60px] lg:mt-[80px] xxl:mt-[90px] mb-[20px] lg:mb-[30px] xl:mb-[40px] xxl:mb-[60px]`}>
      <div className="container">
        <div className={`${styles.HeroBannerContentWrap} gap-[25px] lg:gap-[30px] py-[30px] px-[20px] sm:px-[25px] lg:p-0 relative rounded-[24px] sm:rounded-[30px] lg:rounded-[35px] xl:rounded-[40px] overflow-hidden lg:min-h-[450px] xl:min-h-[500px] xxl:min-h-[590px] xxxl:min-h-[630px]`}>
          <div className={`${styles.HeroBannerContent} relative z-[1] text-center lg:text-left lg:pl-[30px] xl:pl-[40px] xxl:pl-[50px] xxxl:pl-[60px] max-w-[430px] sm:max-w-[490px] lg:max-w-[500px] xl:max-w-[650px] xxl:max-w-[750px]`}>
            <h1 className={`text-whiteColor !mb-[15px] sm:!mb-[20px] md:!mb-[25px] overflow-hidden`}>
              {HeroBanner.TITLE} {" "}
              <div className={`relative z-[1] inline-block h-[38px] xsm:h-[43px] sm:h-[48px] md:h-[60px] xl:h-[61px] xxl:h-[82px] xxxl:h-[86px] overflow-hidden`}>
                <span className={`${styles.AnimatedSpan} !text-left text-primaryColor`}>
                  <span className={`block`}>{HeroBanner.WORK}</span>
                  <span className={`block`}>{HeroBanner.LIVE}</span>
                  <span className={`block`}>{HeroBanner.THRIVE}</span>
                </span>
              </div>
            </h1>
            <p className={`text-whiteColor !mb-0 fs-18 w-full max-w-[520px]`}>
              {HeroBanner.DESCRIPTION}
            </p>
          </div>
          <div className={`${styles.BannerLinksWrapper} relative z-[1] w-full lg:max-w-[400px] xl:max-w-[550px] xxl:max-w-[600px] xxxl:max-w-[680px]`}>
            <h5 className={`!mb-3 sm:!mb-3.5 lg:!mb-4 !font-fw600`}>
              <Link className={`w-full mb-[15px] last:mb-0 p-[20px] sm:p-[25px] md:p-[35px] xl:p-[40px] xxl:p-[45px] bg-[#017981] !text-whiteColor hover:bg-primaryColor duration-300 group flex items-center justify-between gap-4 decoration-0 border border-r-0 hover:!border-primaryColor rounded-[20px] lg:rounded-tr-[0] lg:rounded-br-[0] xl:rounded-tl-[30px] xl:rounded-bl-[30px]`} href={Routes.FIND_A_HOME}>
                <span className={`flex gap-[10px] xl:gap-[15px] items-center`}><i className={`Icon IconHome w-[25px] h-[25px] md:w-[35px] md:h-[35px] xl:w-[40px] xl:h-[40px] !bg-whiteColor duration-300`}></i> {HeroBanner.FIND_MY_HOME}</span>
                <i className={`!bg-whiteColor opacity-0 group-hover:opacity-100 transition-opacity duration-300 Icon IconRightArrow w-[25px] h-[20px] sm:w-[30px] md:w-[32px]`}></i>
              </Link>
            </h5>
            <h5 className={`!mb-0 !font-fw600`}>
              <Link href={Routes.LIST_A_HOME} className={`w-full mb-[15px] last:mb-0 p-[20px] sm:p-[25px] md:p-[35px] xl:p-[40px] xxl:p-[45px] bg-[#017981] !text-whiteColor hover:bg-primaryColor duration-300 group flex items-center justify-between gap-4 decoration-0 border border-r-0 hover:!border-primaryColor rounded-[20px] lg:rounded-tr-[0] lg:rounded-br-[0] xl:rounded-tl-[30px] xl:rounded-bl-[30px]`}>
                <span className={`flex gap-[10px] xl:gap-[15px] items-center`}><i className={`Icon IconOwner w-[25px] h-[25px] md:w-[35px] md:h-[35px] xl:w-[40px] xl:h-[40px] !bg-whiteColor duration-300`}></i> {HeroBanner.BECOME_A_HOST}</span>
                <i className={`!bg-whiteColor opacity-0 group-hover:opacity-100 transition-opacity duration-300 Icon IconRightArrow w-[25px] h-[20px] sm:w-[30px] md:w-[32px]`}></i>
              </Link>
            </h5>
          </div>
        </div>
      </div>
    </section>
  );
};

export default HeroBanner;