System Status Badge

"use client";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCheck,
  faCircleExclamation,
  faTriangleExclamation,
  faMinus,
} from "@fortawesome/pro-solid-svg-icons";
import { cn } from "../lib/utils";

type StatusLevel = "healthy" | "degraded" | "down" | "disabled";

const STATUS_CONFIG: Record<
  StatusLevel,
  { icon: typeof faCheck; dotClass: string; bgClass: string }
> = {
  healthy: {
    icon: faCheck,
    dotClass: "bg-emerald-500",
    bgClass: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800/50 dark:bg-emerald-950/30 dark:text-emerald-300",
  },
  degraded: {
    icon: faCircleExclamation,
    dotClass: "bg-amber-500",
    bgClass: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-300",
  },
  down: {
    icon: faTriangleExclamation,
    dotClass: "bg-red-500",
    bgClass: "border-red-200 bg-red-50 text-red-800 dark:border-red-800/50 dark:bg-red-950/30 dark:text-red-300",
  },
  disabled: {
    icon: faMinus,
    dotClass: "bg-zinc-400",
    bgClass: "border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400",
  },
};

export interface SystemStatusBadgeProps {
  /** Overall system status level. */
  level: StatusLevel;
  /** Label shown next to the dot, e.g. "All systems operational". */
  label: string;
  /** Optional link to the full status page. */
  href?: string;
  /** Optional className for the outer container. */
  className?: string;
}

/**
 * Compact system-status indicator. Designed to be placed in footers,
 * sidebars, or nav bars across all Happenings web apps.
 *
 * Data-driven: the consuming app fetches status server-side and passes
 * the level + label as props.
 */
export function SystemStatusBadge({
  level,
  label,
  href,
  className,
}: SystemStatusBadgeProps) {
  const config = STATUS_CONFIG[level];

  const content = (
    <span
      className={cn(
        "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium transition-colors",
        config.bgClass,
        href && "cursor-pointer hover:opacity-80",
        className,
      )}
    >
      <span
        className={cn(
          "flex size-4 shrink-0 items-center justify-center rounded-full text-white",
          config.dotClass,
        )}
      >
        <FontAwesomeIcon icon={config.icon} className="size-2.5" />
      </span>
      {label}
    </span>
  );

  if (href) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer">
        {content}
      </a>
    );
  }

  return content;
}