import Image from "next/image";
import { getActiveAdBySlot } from "@/lib/queries/ads";
import { AD_SLOTS, type AdSlot as AdSlotType } from "@/lib/constants/promotions";

interface AdSlotProps {
  slot: AdSlotType;
  className?: string;
}

export async function AdSlot({ slot, className = "" }: AdSlotProps) {
  const ad = await getActiveAdBySlot(slot);
  if (!ad) return null;

  const isSidebar = slot === "venue_sidebar";

  return (
    <aside
      className={`ad-slot ${className}`}
      data-ad-slot={slot}
      aria-label={ad.label}
    >
      <p className="mb-2 text-center text-[10px] uppercase tracking-wider text-muted-foreground/60">
        {ad.label}
      </p>

      {ad.type === "html" && ad.htmlContent ? (
        <div
          className="overflow-hidden rounded-xl border border-border bg-card"
          dangerouslySetInnerHTML={{ __html: ad.htmlContent }}
        />
      ) : ad.imageUrl ? (
        <div
          className={`relative overflow-hidden rounded-xl border border-border bg-card ${
            isSidebar ? "aspect-[6/5]" : "aspect-[8/1] sm:aspect-[728/90]"
          }`}
        >
          {ad.linkUrl ? (
            <a
              href={ad.linkUrl}
              target="_blank"
              rel="noopener noreferrer sponsored"
              className="block size-full"
            >
              <Image
                src={ad.imageUrl}
                alt={ad.altText || ad.name}
                fill
                className="object-cover transition-opacity hover:opacity-90"
                sizes={isSidebar ? "300px" : "(max-width: 768px) 100vw, 728px"}
              />
            </a>
          ) : (
            <Image
              src={ad.imageUrl}
              alt={ad.altText || ad.name}
              fill
              className="object-cover"
              sizes={isSidebar ? "300px" : "(max-width: 768px) 100vw, 728px"}
            />
          )}
        </div>
      ) : null}

      <p className="mt-1 text-center text-[10px] text-muted-foreground/40">
        {AD_SLOTS[slot].label}
      </p>
    </aside>
  );
}