import type { Format } from "../api/types";

export const btn =
  "inline-flex items-center gap-1.5 rounded-lg bg-white/[0.06] px-3 py-1.5 text-sm ring-1 ring-white/10 transition-colors hover:bg-white/[0.11] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-50";
export const btnGhost =
  "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-stone-400 transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";

// 格式徽章:按类型着色,色彩之外始终伴随文字,不依赖颜色单独传义
export const FORMAT_BADGE: Record<Format, string> = {
  cbz: "bg-orange-500/15 text-orange-300 ring-orange-500/25",
  pdf: "bg-rose-500/15 text-rose-300 ring-rose-500/25",
  epub: "bg-sky-500/15 text-sky-300 ring-sky-500/25",
  txt: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/25",
  md: "bg-teal-500/15 text-teal-300 ring-teal-500/25",
};

export function formatBadge(fmt: Format, extra = ""): string {
  return `rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ${FORMAT_BADGE[fmt]} ${extra}`;
}