import { FC, ReactNode } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { IAdvertisement } from '@/lib/interfaces'

interface IProps {
    advertisement: IAdvertisement;
    index: number;
}

export const AdvertisementCard: FC<IProps> = ({ advertisement, index }): ReactNode => {
    return <div className="w-full h-full bg-white aspect-square rounded-md overflow-hidden">
        {advertisement.link ?
            <Link href={advertisement.link} target="_blank">
                <Image
                    src={advertisement.image}
                    alt={`Advertisement ${index}`}
                    width={600}
                    height={600}
                    className="object-cover block w-full h-full"
                />
            </Link> :
            <Image
                src={advertisement.image}
                alt={`Advertisement ${index}`}
                width={600}
                height={600}
                className="object-cover block w-full h-full"
            />
        }
    </div>
}