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

const Banners3: FC = () => {

    const { data } = useGetLanding()

    return (
        <div className='flex gap-4'>
            <div className='flex flex-col gap-2 h-full flex-1'>
                <div className='flex-1 h-full'>
                    <Image src={data?.results?.banners?.[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                </div>
                <div className='flex-1 h-full'>
                    <Image src={data?.results?.banners?.[2]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[2]?.altText as string} />
                </div>
            </div>
            <div className='flex-1 h-full'>
                <Image src={data?.results?.banners?.[0]?.imageUrl as string} height={1000} width={1000} className='flex-1 rounded-lg h-full object-cover' alt={data?.results?.banners?.[0]?.altText as string} />
            </div>
        </div>
    )
}

export default Banners3