import AnimatedProcessingIcon from "../icons/animated-processing-icon";

export type Status =
  | "processing"
  | "active"
  | "unavailable"
  | "hidden"
  | "sync"
  | "failed";

interface StatusBadgeProps {
  status: Status;
  className?: string;
}

const statusConfig = {
  processing: {
    label: "Processing",
    className: "text-muted-foreground ",
  },
  active: {
    label: "Active",
    className: "text-accent-emerald-foreground ",
  },
  unavailable: {
    label: "Unavailable",
    className: "text-accent-red-foreground ",
  },
  failed: {
    label: "Failed",
    className: "text-accent-red-foreground ",
  },
  hidden: {
    label: "Hidden",
    className: "text-muted-foreground ",
  },
  sync: {
    label: "Sync",
    className: "text-accent-amber-foreground underline",
  },
};

export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
  const config = statusConfig[status];

  return (
    <div
      className={`inline-flex items-center gap-1 ${config.className} ${
        className || ""
      }`}
    >
      {status === "processing" && (
        <AnimatedProcessingIcon className="text-current shrink-0" />
      )}
      {config.label}
    </div>
  );
};