// Petits widgets partages.
import React from "react";

const STATUS_STYLE = {
  done: "bg-emerald-900/50 text-emerald-300",
  running: "bg-ink-accent/20 text-ink-accent",
  error: "bg-red-900/50 text-red-300",
  pending: "bg-ink-edge text-ink-muted",
};
const STATUS_LABEL = { done: "terminé", running: "en cours", error: "erreur", pending: "en attente" };

export function StatusChip({ status }) {
  return (
    <span className={`chip ${STATUS_STYLE[status] || STATUS_STYLE.pending}`}>
      {STATUS_LABEL[status] || status}
    </span>
  );
}

export function ProgressBar({ value }) {
  return (
    <div className="h-1.5 w-full overflow-hidden rounded-full bg-ink-edge">
      <div
        className="h-full bg-ink-accent transition-all duration-300"
        style={{ width: `${Math.round((value || 0) * 100)}%` }}
      />
    </div>
  );
}

export function Spinner() {
  return (
    <span className="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-ink-accent border-t-transparent" />
  );
}
