/* 
  This is the join the community component.
  It contains the following components:
  - JoinTheCommunity
*/
import Routes from '@/src/utils/RouteConstants';
import Image from 'next/image';
import Link from 'next/link';
import JoinTheCommunityImg from '../../../public/images/join-the-community-img.svg';
import styles from "./JoinTheCommunity.module.scss";

interface JoinTheCommunityProps {
    TITLE: string;
    DESCRIPTION: string;
    LIST_YOUR_PROPERTY: string;
    FIND_YOUR_HOME: string;
};

const JoinTheCommunity = ({ JoinTheCommunityData }: { JoinTheCommunityData: JoinTheCommunityProps }) => {

    return (
        <section className={`${styles.JoinTheCommunityWrapper} my-[30px] sm:my-[40px] lg:my-[50px] xxl:my-[65px]`}>
            <div className={`container`}>
                <div className={`${styles.JoinTheCommunityContentWrap} rounded-[20px] lg:rounded-[30px] xxl:rounded-[40px] p-[20px] sm:p-[30px] lg:p-[40px] xxl:p-[50px]`}>
                    <div className={`flex flex-wrap flex-col-reverse sm:flex-nowrap sm:flex-row items-center justify-center gap-[20px] lg:gap-[40px] xxl:gap-[50px]`}>
                        <div className={`${styles.JoinTheCommunityContent} text-center sm:text-left max-w-[770px] xxl:max-w-[820px] w-full mr-auto`}>
                            <h2 className={`text-white mb-[12px] md:mb-[20px] xl:mb-[25px]`}>{JoinTheCommunityData?.TITLE}</h2>
                            <p className={`text-white fs-20`}>{JoinTheCommunityData?.DESCRIPTION}</p>
                        </div>
                        <div className={`md:max-w[300px] md:min-w-[300px] lg:max-w[350px] lg:min-w-[350px] xl:max-w[400px] xl:min-w-[400px] xxl:max-w[500px] xxl:min-w-[500px] xxxl:max-w[550px] xxxl:min-w-[550px]`}>
                            <Image className={`w-full`} src={JoinTheCommunityImg} alt="join-the-community" />
                        </div>
                    </div>
                    {/* Button Wrap */}
                    <div className={`flex gap-[12px] flex-wrap sm:flex-nowrap mt-[20px] lg:mt-[25px] xxl:mt-[32px]`}>
                        <Link href={Routes.LIST_A_HOME} className={`WhiteBtn w-full`}>{JoinTheCommunityData?.LIST_YOUR_PROPERTY}</Link>
                        <Link href={Routes.FIND_A_HOME} className={`WhiteBorderedBtn w-full`}>{JoinTheCommunityData?.FIND_YOUR_HOME}</Link>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default JoinTheCommunity