import { ReactElement } from "react";

type IabSize = "728x90" | "300x250" | "300x600" | "160x600" | "970x250" | "320x50";
type Zone =
  | "article-top"
  | "article-bottom"
  | "article-sidebar-top"
  | "article-sidebar-mid"
  | "article-inline"
  | "homepage-top"
  | "homepage-bottom";

const SIZE_MAP: Record<IabSize, { w: number; h: number }> = {
  "728x90": { w: 728, h: 90 },
  "300x250": { w: 300, h: 250 },
  "300x600": { w: 300, h: 600 },
  "160x600": { w: 160, h: 600 },
  "970x250": { w: 970, h: 250 },
  "320x50": { w: 320, h: 50 },
};

interface AdSlotProps {
  zone: Zone;
  size: IabSize;
  className?: string;
}

/**
 * Banner ad slot. Server component (no client JS).
 *
 * Renders a labeled placeholder until populated. The eventual implementation
 * will query bb.ad_placements (server-side) and render an <a><img></a> for the
 * winning campaign + record an impression.
 */
export default function AdSlot({ zone, size, className = "" }: AdSlotProps): ReactElement {
  const { w, h } = SIZE_MAP[size];
  return (
    <div
      role="complementary"
      aria-label={`Advertisement (${size})`}
      data-ad-zone={zone}
      data-ad-size={size}
      className={`mx-auto flex items-center justify-center bg-[#F8FAFC] border border-[#FFFFFF] text-[#444] text-[10px] font-body uppercase tracking-widest ${className}`}
      style={{ width: w, height: h, maxWidth: "100%" }}
    >
      <span>Ad · {size}</span>
    </div>
  );
}
