shop-front/src/app/home/components/Banners3.tsx

'use client'
import Image from 'next/image'
import Link from 'next/link'
import { FC, useMemo } from 'react'

import { IBanner } from '@/types/landing.types'
import { useGetLanding } from '@/app/home/hooks/useHomeData'

const Banners3: FC = () => {

    const { data } = useGetLanding()

    const { desktopBanners, mobileBanners } = useMemo(() => {
        const allBanners = data?.results?.banners ?? []

        const sortByOrder = (items: IBanner[]) =>
            [...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)

        const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
            sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation))

        return {
            desktopBanners: groupByDisplayLocation('desktop'),
            mobileBanners: groupByDisplayLocation('mobile'),
        }
    }, [data?.results?.banners])

    const renderLayout = (banners: IBanner[]) => {
        if (banners.length < 3) return null

        const [firstBanner, secondBanner, thirdBanner] = banners

        if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null

        return (
            <div className='flex lg:flex-row flex-col gap-4'>
                <div className='flex flex-col gap-2 h-full flex-1'>
                    <div className='flex-1 h-full'>
                        <Link href={firstBanner.linkUrl || '#'}>
                            <Image
                                src={firstBanner.imageUrl}
                                height={500}
                                width={1000}
                                className='flex-1 rounded-lg'
                                alt={firstBanner.altText}
                            />
                        </Link>
                    </div>
                    <div className='flex-1 h-full'>
                        <Link href={secondBanner.linkUrl || '#'}>
                            <Image
                                src={secondBanner.imageUrl}
                                height={500}
                                width={1000}
                                className='flex-1 rounded-lg'
                                alt={secondBanner.altText}
                            />
                        </Link>
                    </div>
                </div>
                <div className='flex-1 h-full'>
                    <Link href={thirdBanner.linkUrl || '#'}>
                        <Image
                            src={thirdBanner.imageUrl}
                            height={1000}
                            width={1000}
                            className='flex-1 rounded-lg h-full object-cover'
                            alt={thirdBanner.altText}
                        />
                    </Link>
                </div>
            </div>
        )
    }

    return (
        <>
            <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
            <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
        </>
    )
}

export default Banners3