import { useTranslation } from "react-i18next";
import { Sparkles } from "lucide-react";
import { FRONTEND_VERSION, SEEN_VERSION_OPTIONS, SEEN_VERSION_PREF } from "../lib/version";
import { usePref } from "../lib/usePref";
import Banner from "../components/ui/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 [seen, setSeen] = usePref(SEEN_VERSION_PREF, null, SEEN_VERSION_OPTIONS);
  // Don't nag in un-stamped dev builds, or once this version has been seen.
  const show = FRONTEND_VERSION !== "dev" && seen !== FRONTEND_VERSION;
  if (!show) return null;

  const markSeen = () => setSeen(FRONTEND_VERSION);

  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>
  );
}