---
import { isPrereleaseSite, PRODUCTION_URL } from '@/consts';

// Only render on the pre-release host. Evaluated at build time, so the markup
// is omitted entirely from production and deploy-preview builds.
const showBanner = isPrereleaseSite(Astro.site);
---

{
  showBanner && (
    <div
      role="region"
      aria-label="Pre-release documentation notice"
      class:list={[
        "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="text-center">
        You&rsquo;re viewing pre-release docs.{" "}
        <a
          href={PRODUCTION_URL.href}
          class="font-bold whitespace-nowrap underline intent:decoration-gold"
        >
          Visit videojs.org
        </a>{" "}
        for the latest stable version.
      </p>
    </div>
  )
}