import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Sparkles } from "lucide-react";
import { FRONTEND_VERSION, SEEN_VERSION_KEY } from "../lib/version";
import Banner from "./Banner";

// Eye-catching, dismissible bar shown once after the running build's version changes
// (compares the baked frontend version to the last one the user acknowledged).
export default function VersionBanner({ onOpen }: { onOpen: () => void }) {
  const { t } = useTranslation();
  const [dismissed, setDismissed] = useState(false);
  const seen = localStorage.getItem(SEEN_VERSION_KEY);
  // Don't nag in un-stamped dev builds, or once this version has been seen.
  const show = FRONTEND_VERSION !== "dev" && seen !== FRONTEND_VERSION && !dismissed;
  if (!show) return null;

  function markSeen() {
    localStorage.setItem(SEEN_VERSION_KEY, FRONTEND_VERSION);
    setDismissed(true);
  }

  return (
    <Banner
      tone="accent"
      icon={Sparkles}
      action={{
        label: t("header.banner.releaseNotes"),
        onClick: () => {
          onOpen();
          markSeen();
        },
      }}
      onDismiss={markSeen}
      dismissTitle={t("header.banner.dismiss")}
    >
      {t("header.banner.updated", { version: FRONTEND_VERSION })}
    </Banner>
  );
}