'use client'
import { FC } from 'react'
import { useGetLanding } from '../hooks/useHomeData'
import Image from 'next/image'

const Banners4: FC = () => {
    const { data } = useGetLanding()

    return (
        <div className='flex gap-6 h-[340px]'>
            <div className='flex-1 bg-primary/10 h-full rounded-[10px]'>
                <Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
            </div>

            <div className='w-[158px] flex flex-col gap-6'>
                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-100'>
                    <Image src={data?.results?.banners?.[4]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                </div>
                <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-200'>
                    <Image src={data?.results?.banners?.[5]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                </div>
            </div>

            <div className='w-[400px] bg-amber-50'>
                <Image src={data?.results?.banners?.[6]?.imageUrl as string} height={400} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
            </div>

        </div>
    )
}

export default Banners4