"use client";

interface StatusIndicatorProps {
  status: "green" | "amber" | "red" | "unknown";
  size?: "sm" | "md" | "lg";
}

const COLORS = {
  green: { bg: "bg-emerald-500", shadow: "shadow-emerald-500/50", ring: "ring-emerald-500/30" },
  amber: { bg: "bg-amber-500", shadow: "shadow-amber-500/50", ring: "ring-amber-500/30" },
  red: { bg: "bg-red-500", shadow: "shadow-red-500/50", ring: "ring-red-500/30" },
  unknown: { bg: "bg-zinc-500", shadow: "shadow-zinc-500/50", ring: "ring-zinc-500/30" },
};

const SIZES = { sm: "w-2 h-2", md: "w-3 h-3", lg: "w-4 h-4" };

export default function StatusIndicator({ status, size = "md" }: StatusIndicatorProps) {
  const c = COLORS[status];
  return (
    <span className="relative inline-flex">
      <span className={`${SIZES[size]} rounded-full ${c.bg} shadow-lg ${c.shadow}`} />
      {status !== "unknown" && (
        <span className={`absolute inset-0 rounded-full ${c.bg} opacity-75 ${status === "red" ? "animate-ping" : "animate-pulse"}`} />
      )}
    </span>
  );
}
