import clsx from "clsx";
import type { CompanyStatus, SeverityLevel } from "@/lib/types";

const SEVERITY_CLASSES: Record<SeverityLevel, string> = {
  critical: "bg-severity-critical/10 text-severity-critical",
  high: "bg-severity-high/10 text-severity-high",
  medium: "bg-severity-medium/10 text-severity-medium",
  low: "bg-severity-low/10 text-severity-low",
};

export function SeverityBadge({ severity }: { severity: SeverityLevel }) {
  return (
    <span
      className={clsx(
        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium capitalize",
        SEVERITY_CLASSES[severity],
      )}
    >
      {severity}
    </span>
  );
}

const STATUS_CLASSES: Record<CompanyStatus, string> = {
  active: "bg-green-100 text-green-800",
  paused: "bg-slate-200 text-slate-700",
};

export function CompanyStatusBadge({ status }: { status: CompanyStatus }) {
  return (
    <span
      key={status}
      className={clsx(
        "inline-flex animate-fade-in items-center rounded-full px-2 py-0.5 text-xs font-medium capitalize",
        STATUS_CLASSES[status],
      )}
    >
      {status}
    </span>
  );
}