import { useState } from "react";
import { useTranslation } from "react-i18n-lite";

const DISMISS_KEY = "cloud-reader.pdf-limitations-dismissed";

interface PdfLimitationsNoticeProps {
  bookId: number;
}

export function PdfLimitationsNotice({ bookId }: PdfLimitationsNoticeProps) {
  const { t } = useTranslation();
  const storageKey = `${DISMISS_KEY}:${bookId}`;
  const [visible, setVisible] = useState(() => {
    try {
      return localStorage.getItem(storageKey) !== "1";
    } catch {
      return true;
    }
  });

  if (!visible) return null;

  const dismiss = () => {
    setVisible(false);
    try {
      localStorage.setItem(storageKey, "1");
    } catch {
      /* ignore */
    }
  };

  return (
    <div className="reader-pdf-notice" role="status">
      <div className="reader-pdf-notice-text">
        <strong className="reader-pdf-notice-title">{t("reader.pdfLimitationsTitle")}</strong>
        <p className="reader-pdf-notice-body">{t("reader.pdfLimitationsBody")}</p>
      </div>
      <button
        type="button"
        className="reader-pdf-notice-dismiss"
        onClick={dismiss}
        aria-label={t("reader.pdfLimitationsDismissAria")}
      >
        {t("common.dismiss")}
      </button>
    </div>
  );
}