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 colorClass =
    status === "connected"
      ? "bg-pai-success"
      : status === "connecting"
      ? "bg-pai-warning"
      : "bg-pai-error";

  return (
    <View
      className={`rounded-full ${colorClass}`}
      style={{ width: size, height: size }}
    />
  );
}