---
import { BANNER_DISMISS_KEY } from '@/consts';
---

<div
  data-legacy-banner
  class:list={[
    "banner-dismissed:hidden",
    "relative py-2 text-p3 md:text-p2",
    "border-b border-manila-75 bg-manila-50 text-faded-black",
    "dark:border-soot dark:bg-warm-gray dark:text-manila-light",
  ]}
>
  <p class="px-12 text-center">
    Using Video.js v8 or earlier?{" "}
    <a
      href="https://legacy.videojs.org"
      class="font-bold whitespace-nowrap underline intent:decoration-gold"
    >
      Visit legacy.videojs.org
    </a>
  </p>
  <button
    type="button"
    data-legacy-banner-dismiss
    aria-label="Dismiss banner"
    class:list={[
      "absolute top-1/2 right-2 -translate-y-1/2",
      "shrink-0 cursor-pointer rounded p-2 intent:bg-manila-light dark:intent:bg-faded-black",
    ]}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

<script is:inline define:vars={{ bannerKey: BANNER_DISMISS_KEY }}>
  var dismissBtn = document.querySelector("[data-legacy-banner-dismiss]");
  if (dismissBtn) {
    dismissBtn.addEventListener("click", function () {
      try {
        localStorage.setItem(bannerKey, "true");
      } catch (e) {}
      document.documentElement.classList.add("banner-dismissed");
    });
  }
</script>