/*
    This component is for the home varieties card.
    It also includes a link to the find a home info page.
*/
import { Image as Images, PropertyData } from '@/src/types/api/property.type';
import { VarietiesOfHomes } from '@/src/types/StaticContent/home.content.type';
import Routes from '@/src/utils/RouteConstants';
import Image from 'next/image';
import Link from 'next/link';
import NoImages from "../../../public/images/no-listing.png";
import styles from './HomeVarietiesCard.module.scss';

const HomeVarietiesCard = ({ mainContent, propertyImages, VarietiesOfHomes }: { mainContent: PropertyData, propertyImages: Images[], VarietiesOfHomes: VarietiesOfHomes }) => {
    return (
        <>
            {/* Card Item */}
            <div className={`${styles.HomeVarietiesCardWrap} group relative h-full`}>
                <span className={`${styles.LinkArrow} bg-secondaryColor rotate-[-45deg] before:content-[''] before:absolute before:left-[50%] before:top-[50%] before:inline-block before:-translate-x-1/2 before:-translate-y-1/2 before:w-[16px] before:h-[16px] before:xxl:w-[16px] before:xxl:h-[16px] before:xxxl:w-[22px] before:xxxl:h-[22px] overflow-hidden rounded-full inline-flex items-center justify-center absolute top-0 right-0 w-[42px] h-[42px] xl:w-[50px] xl:h-[50px] xxl:w-[57px] xxl:h-[57px] xxxl:w-[67px] xxxl:h-[67px]`}></span>
                <div className={`${styles.HomeVarietiesCardContent} px-4 py-5`}>
                    <h6 className={`!mb-[11px] text-black pr-14 md:pr-20`}>{mainContent?.name}</h6>
                    <div className={`flex flex-wrap gap-y-1 gap-x-2.5 xl:pr-5 xxl:pr-16`}>
                        <span className={`flex gap-2 items-center text-grey344Color !font-fw600 fs-16`}> <i className={`Icon IconWifi w-[18px] h-[18px] !bg-grey344Color`}></i> {VarietiesOfHomes?.INTERNET_CONNECTION}</span>
                        <span className={`flex gap-2 items-center text-secondaryColor !font-fw600 fs-16`}> <i className={`block w-[10px] h-[6px] rounded-full bg-green`}></i> <i className={`block w-[10px] h-[6px] rounded-full bg-green`}></i> <i className={`block w-[10px] h-[6px] rounded-full bg-green`}></i>{mainContent?.internetInfo?.downloadSpeed} {VarietiesOfHomes?.MBPS}</span>
                    </div>
                    <div className={`max-h-[200px] sm:max-h-[250px] lg:max-h-[270px] xxl:max-h-[300px] xxxl:max-h-[370px] h-full overflow-hidden rounded-[16px] sm:rounded-[20px] md:roundd-[25px] lg:rounded-[22px] xl:rounded-[26px] xxxl:rounded-[34px] mt-3.5 sm:mt-4 bg-whiteFBColor`}>
                        {propertyImages?.[0]?.imageUrl ?
                            <Image className={`w-full !h-full object-cover object-center transition-transform duration-300 group-hover:scale-102`} width={500} height={500} src={propertyImages?.[0]?.imageUrl} alt='home-img' />
                            :
                            <Image className={`w-full !h-full object-cover object-center transition-transform duration-300 group-hover:scale-102`} width={500} height={500} src={NoImages} alt='home-img' />
                        }
                    </div>
                    <div className={`text-center font-fw700 text-whiteColor max-w-max pt-1.5 pb-1 px-8 sm:px-11 bg-primaryColor border-5 border-b-0 border-whiteColor rounded-tr-full rounded-tl-full absolute left-1/2 -translate-x-1/2 bottom-0 fs-18 w-max`}>
                        {mainContent?.currency} {mainContent?.totalPrice}<span className={`fs-16 font-fw400`}>/{VarietiesOfHomes?.WEEK}</span>
                    </div>
                </div>
                <Link className={`absolute block top-0 left-0 w-full h-full`} href={Routes.HOME_FIND_A_HOME_INFO(mainContent?.slug)} />
            </div>
        </>
    )
}

export default HomeVarietiesCard