import { FC, ReactNode } from 'react'
import { IAdvertisement, ISlider } from '@/lib/interfaces'
import { HomeSlider } from './home-slider';
import { AdvertisementCard } from './advertisement-card';

interface IProps {
    advertisements?: IAdvertisement[];
    sliders?: ISlider[];
}

export const HeroSection: FC<IProps> = ({ advertisements, sliders }): ReactNode => {
    return <section className="my-4 grid grid-cols-12 gap-4 w-full">
        <div className="col-span-2">
            {advertisements && advertisements[0] && <AdvertisementCard advertisement={advertisements[0]} index={1} />}
        </div>

        <div className="col-span-8">
            <div className="w-full bg-white rounded-md overflow-hidden h-full">
                <HomeSlider sliders={sliders} />
            </div>
        </div>

        <div className="col-span-2">
            {advertisements && advertisements[1] && <AdvertisementCard advertisement={advertisements[1]} index={2} />}
        </div>
    </section>
}