"use client";

interface TeletraanFaceProps {
  overall: "healthy" | "degraded" | "critical";
}

const BORDER_COLORS = {
  healthy: "border-emerald-500 shadow-emerald-500/30",
  degraded: "border-amber-500 shadow-amber-500/30",
  critical: "border-red-500 shadow-red-500/30",
};

export default function TeletraanFace({ overall }: TeletraanFaceProps) {
  return (
    <div className={`
      relative w-24 h-24 rounded-lg border-4 shadow-lg transition-all duration-500
      bg-zinc-900 flex items-center justify-center
      ${BORDER_COLORS[overall]}
    `}>
      <div className="text-3xl">🤖</div>
      <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 px-2 py-0.5 rounded text-[10px] font-mono uppercase tracking-wider whitespace-nowrap
        ${overall === "healthy" ? "bg-emerald-500/20 text-emerald-400" : overall === "degraded" ? "bg-amber-500/20 text-amber-400" : "bg-red-500/20 text-red-400"}
      `}>
        {overall === "healthy" ? "All Systems Go" : overall === "degraded" ? "Warnings" : "Alert"}
      </div>
    </div>
  );
}
