---
interface Props {
  size: "leaderboard" | "rectangle" | "tile";
}

const { size } = Astro.props;

const ads = [
  {
    href: "https://kjuzv.com/g/q6gfnfvsq067a6d0fce8a804937a48/?erid=MvGzQC98w3Z1gMq1kx5ACoy5",
    label: "Читай-город — книги со скидкой",
    sublabel: "Более 3 млн книг с доставкой по всей России",
    cta: "Купить",
    ctaMobile: "Купить",
  },
];

const ad = ads[Math.floor(Math.random() * ads.length)];

const specs = {
  leaderboard: { class: "w-full h-[90px]", horizontal: true },
  rectangle: { class: "w-full max-w-[300px] h-[250px]", horizontal: false },
  tile: { class: "w-full h-[250px]", horizontal: false },
};

const { class: sizeClass, horizontal } = specs[size];
---

<aside aria-label="Реклама">
  <a
    href={ad.href}
    target="_blank"
    rel="noopener sponsored"
    class={`${sizeClass} flex ${horizontal ? "flex-row items-center gap-4 px-6" : "flex-col items-center justify-center gap-3 px-4"} rounded-xl border border-zinc-800 bg-zinc-900/50 hover:border-accent/50 hover:bg-zinc-900 transition-colors duration-200 group`}
  >
    <svg
      class="shrink-0 text-yandex"
      width={horizontal ? "32" : "40"}
      height={horizontal ? "32" : "40"}
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <circle cx="20" cy="20" r="20" fill="currentColor"></circle>
      <path
        d="M22.44 10H19.1c-3.78 0-6.1 2.02-6.1 5.32 0 2.66 1.26 4.24 3.64 5.8L13.5 30h3.38l3.4-8.38-.96-.58c-1.84-1.12-2.72-2.08-2.72-3.92 0-1.94 1.3-3.08 3.44-3.08h1.4V30h3V10z"
        fill="white"></path>
    </svg>

    {
      horizontal ? (
        <>
          <div class="flex-1 min-w-0">
            <div class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-0.5">
              Реклама
            </div>
            <div class="text-sm font-semibold text-zinc-100 group-hover:text-accent transition-colors leading-tight">
              {ad.label}
            </div>
            <div class="text-xs text-zinc-500 mt-0.5">{ad.sublabel}</div>
          </div>
          <span class="shrink-0 text-xs font-semibold text-white bg-yandex px-3 py-1.5 rounded-lg group-hover:bg-yandex-hover transition-colors whitespace-nowrap">
            {ad.cta}
          </span>
        </>
      ) : (
        <>
          <div class="text-center">
            <div class="text-xs font-medium text-zinc-500 uppercase tracking-widest mb-2">
              Реклама
            </div>
            <div class="text-base font-semibold text-zinc-100 group-hover:text-accent transition-colors leading-snug">
              {ad.label}
            </div>
            <div class="text-xs text-zinc-500 mt-1">{ad.sublabel}</div>
          </div>
          <span class="text-xs font-semibold text-white bg-yandex px-4 py-2 rounded-lg group-hover:bg-yandex-hover transition-colors">
            {ad.ctaMobile}
          </span>
        </>
      )
    }
  </a>
</aside>