import { useI18n } from "../../i18n/I18nContext";
import {
  EXTENSION_DOWNLOAD_FILENAME,
  EXTENSION_DOWNLOAD_URL,
  EXTENSION_VERSION,
} from "../../lib/extensionInstall";
import { Badge } from "../ui";

/**
 * 開發模式：下載 Chrome 擴充 + 安裝步驟（對齊舊 ExtensionInstallCard）。
 */
export function ExtensionInstallCard() {
  const { t } = useI18n();
  const steps = [
    t("settings.ext.step1"),
    t("settings.ext.step2"),
    t("settings.ext.step3"),
    t("settings.ext.step4"),
  ];

  return (
    <div className="hb-ext-card">
      <div className="hb-ext-card__head">
        <div>
          <strong>{t("settings.ext.title")}</strong>
          <p className="text-muted hb-ext-card__desc">{t("settings.ext.desc")}</p>
        </div>
        <Badge tone="neutral">v{EXTENSION_VERSION}</Badge>
      </div>
      <ol className="hb-ext-card__steps">
        {steps.map((step) => (
          <li key={step}>{step}</li>
        ))}
      </ol>
      <a
        href={EXTENSION_DOWNLOAD_URL}
        download={EXTENSION_DOWNLOAD_FILENAME}
        className="hb-btn hb-btn--primary"
        style={{ width: "fit-content", textDecoration: "none" }}
      >
        {t("settings.ext.download")}
      </a>
    </div>
  );
}
