import { cn } from "@/lib/utils";

/**
 * Color mapping for different status values.
 * Uses semantic colors that work well as small dots.
 */
const statusColors: Record<string, string> = {
  // Task statuses
  pending: "bg-gray-400",
  pending_approval: "bg-yellow-400",
  in_progress: "bg-blue-500",
  completed: "bg-green-500",
  blocked: "bg-red-500",

  // Agent statuses
  idle: "bg-gray-400",
  running: "bg-blue-500",
  waiting_for_input: "bg-yellow-400",
  stopped: "bg-gray-600",
  crashed: "bg-red-500",

  // Initiative/Phase statuses
  active: "bg-blue-500",
  archived: "bg-gray-400",

  // Message statuses
  read: "bg-green-500",
  responded: "bg-blue-500",

  // Priority indicators
  low: "bg-green-400",
  medium: "bg-yellow-400",
  high: "bg-red-400",
} as const;

const defaultColor = "bg-gray-400";

interface StatusDotProps {
  status: string;
  size?: "sm" | "md" | "lg";
  className?: string;
  title?: string;
}

/**
 * Small colored dot to indicate status at a glance.
 * More compact than StatusBadge for use in lists or tight spaces.
 */
export function StatusDot({
  status,
  size = "md",
  className,
  title
}: StatusDotProps) {
  const sizeClasses = {
    sm: "h-2 w-2",
    md: "h-3 w-3",
    lg: "h-4 w-4"
  };

  const color = statusColors[status] ?? defaultColor;
  const displayTitle = title ?? status.replace(/_/g, " ").toLowerCase();

  return (
    <div
      className={cn(
        "rounded-full",
        sizeClasses[size],
        color,
        className
      )}
      title={displayTitle}
      aria-label={`Status: ${displayTitle}`}
    />
  );
}