import React from "react";
import { View } from "react-native";
import { ConnectionStatus } from "../../types";

interface StatusDotProps {
  status: ConnectionStatus;
  size?: number;
}

export function StatusDot({ status, size = 10 }: StatusDotProps) {
  const color =
    status === "connected"
      ? "#22c55e"
      : status === "compacting"
      ? "#3b82f6"
      : status === "connecting" || status === "reconnecting"
      ? "#eab308"
      : "#ef4444";

  return (
    <View
      className="rounded-full"
      style={{ width: size, height: size, backgroundColor: color }}
    />
  );
}