import { AlertTriangle, Loader2 } from "lucide-react";
import type { SetupStatus } from "../types";

type StatusRailProps = {
  busyAction: string | null;
  setupStatus: SetupStatus;
};

export function StatusRail({ busyAction, setupStatus }: StatusRailProps) {
  if (!busyAction && setupStatus.state === "ok") return null;
  return (
    <div className="mt-3 grid gap-2">
      {busyAction && (
        <div className="status-card">
          <Loader2 className="animate-spin" size={17} aria-hidden="true" />
          Working on {actionLabel(busyAction)}...
        </div>
      )}
      {setupStatus.state === "error" && (
        <div className="status-card status-card--warning">
          <AlertTriangle size={17} aria-hidden="true" />
          {setupStatus.message}
        </div>
      )}
    </div>
  );
}

function actionLabel(value: string) {
  return value
    .replace(/^quick-/, "quick add ")
    .replace(/-/g, " ");
}