import { Events } from "../../index";

export default function AdSpace(Props: Ads.AdSpace) {
    const {
        title = "Espacio disponible para publicidad",
        sold,
        href = "#",
        quote = undefined,
        ariaLabel = "Más información sobre el espacio publicitario",
        rel = "tag",
        target = "_self",
        message = "Haga clic aquí para mayor información",
        width = 600,
        height = 200,
        img,
        responsive,
    } = Props;

    const size = {
        width,
        height,
    };
    if (sold)
        return (
            <a href={href} aria-label={ariaLabel} target={target} rel={rel}>
                <picture
                    key={`banner-pic-${Events.Utils.slugify(title)}`}
                    className="w-full m-auto max-h-56 flex-shrink-0"
                >
                    {responsive && (
                        <source
                            srcSet={responsive}
                            media="(max-width: 767px)"
                        />
                    )}
                    <source srcSet={img} media="(min-width: 768px)" />
                    <img
                        src={img}
                        alt={ariaLabel}
                        loading="lazy"
                        className="w-full mx-auto object-contain max-h-56 flex-shrink-0"
                        style={size}
                    />
                </picture>
                {quote && (
                    <p className="mx-auto mt-2 text italic text-center font-semibold">
                        {quote}
                    </p>
                )}
            </a>
        );
    else
        return (
            <>
                <a
                    href={href}
                    aria-label={ariaLabel}
                    target={target}
                    rel={rel}
                    style={size}
                    className="hidden md:flex relative overflow-hidden cursor-pointer bg50 hover:bg100 transition-all mx-auto md:mt-10 text-center rounded-lg p-4 border-4 buttonBorder w-[320px] h-[200px] justify-center items-center before:absolute before:top-0 before:w-full before:h-full before:bg-gradient-to-r before:from-transparent before:via-white/40 before:to-transparent before:transition-all before:duration-[300ms] before:left-[-100%] before:hover:left-[100%] darkContainer darkContainerHover"
                >
                    <div>
                        <h2 className="text-center darkTitle">{title}</h2>
                        <p className="H4 italic darkTitle block">
                            {`(${width.toString()}px - ${height.toString()}px)`}
                        </p>
                        <p className="italic font-light text">{message}</p>
                    </div>
                </a>
                <a
                    href={href}
                    aria-label={ariaLabel}
                    target={target}
                    rel={rel}
                    className="flex md:hidden cursor-pointer bg50 hover:bg100 transition-all mx-auto md:mt-10 text-center rounded-lg p-4 border-4 buttonBorder w-[320px] h-[200px] justify-center items-center darkContainer darkContainerHover"
                >
                    <div>
                        <h2 className="text-center darkTitle">{title}</h2>
                        <p className="H4 italic darkTitle md:hidden block">
                            (320px - 200px)
                        </p>
                        <p className="italic font-light text">{message}</p>
                    </div>
                </a>
            </>
        );
}