import {
  EXTENSION_DOWNLOAD_URL,
  EXTENSION_INSTALL_STEPS,
  EXTENSION_VERSION,
} from '../lib/extensionInstall'
import { Badge, SectionTitle } from './ui'

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

export function ExtensionInstallCard({ compact, showSteps = true }: ExtensionInstallCardProps) {
  return (
    <div className={`grid gap-4 ${compact ? '' : ''}`}>
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="grid gap-2">
          <SectionTitle>Chrome 擴充套件</SectionTitle>
          <p className="text-sm leading-relaxed text-ink-secondary">
            開發模式（爬蟲）需安裝此擴充，才能從 Chrome 同步 Threads 登入態到巡樓。
          </p>
        </div>
        <Badge tone="sky">v{EXTENSION_VERSION}</Badge>
      </div>

      {showSteps ? (
        <ol className="grid gap-2 sm:grid-cols-2">
          {EXTENSION_INSTALL_STEPS.map((step, index) => (
            <li key={step} className="ac-slot flex gap-3 px-4 py-3 text-sm">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-brand bg-brand-soft text-xs font-bold text-brand">
                {index + 1}
              </span>
              <span className="text-ink-secondary">{step}</span>
            </li>
          ))}
        </ol>
      ) : null}

      <a
        href={EXTENSION_DOWNLOAD_URL}
        download="haixun-threads-sync.zip"
        className="ac-btn-primary inline-flex w-fit min-h-11 items-center justify-center rounded-[var(--radius-pill)] px-5 py-2.5 text-sm font-bold"
      >
        下載擴充套件（ZIP）
      </a>
    </div>
  )
}