import { useBuildChanged, type BuildWatchOptions } from "../lib/buildWatch";

export const UPDATED_TEXT = "Packet Station was updated. Reload to get the new version.";

const reloadPage = () => window.location.reload();

/** A strip across the top when the server build changed since this page loaded. Reload is the user's call. */
export function VersionBanner({ onReload = reloadPage, ...opts }: BuildWatchOptions & { onReload?: () => void }) {
  const changed = useBuildChanged(opts);
  if (!changed) return null;
  return (
    <div className="vbanner" role="status" data-testid="version-banner">
      <span>{UPDATED_TEXT}</span>
      <button className="btn sm pri" type="button" onClick={onReload}>
        Reload
      </button>
    </div>
  );
}