import {
  EXTENSION_DOWNLOAD_URL,
  EXTENSION_INSTALL_STEPS,
  EXTENSION_VERSION,
} from "../lib/extensionInstall";
import { Badge } from "./ui";

type ExtensionInstallCardProps = {
  compact?: boolean;
  showSteps?: boolean;
};

export function ExtensionInstallCard({ compact, showSteps = true }: ExtensionInstallCardProps) {
  return (
    <div className="page-grid" style={{ gap: compact ? "0.75rem" : "1rem" }}>
      <div className="button-row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <div>
          <strong>Chrome 擴充套件</strong>
          <p className="muted hx-text-sm" style={{ margin: "0.4rem 0 0" }}>
            開發模式（爬蟲）需安裝此擴充，才能從 Chrome 同步 Threads 登入態到巡樓。
          </p>
        </div>
        <Badge variant="neutral">v{EXTENSION_VERSION}</Badge>
      </div>

      {showSteps ? (
        <ol className="hx-text-sm" style={{ margin: 0, paddingLeft: "1.2rem" }}>
          {EXTENSION_INSTALL_STEPS.map((step) => (
            <li key={step} style={{ marginBottom: "0.35rem" }}>
              {step}
            </li>
          ))}
        </ol>
      ) : null}

      <a
        href={EXTENSION_DOWNLOAD_URL}
        download="haixun-threads-sync.zip"
        className="ac-btn ac-btn-primary"
        style={{ width: "fit-content", textDecoration: "none" }}
      >
        下載擴充套件（ZIP）
      </a>
    </div>
  );
}