import React from "react";
import { Box } from "@mui/material";
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
import { useSseConnected } from "../context/useResource";

interface SseConnectionStatusProps {
  resourceName: string;
}

export function SseConnectionStatus({ resourceName }: SseConnectionStatusProps) {
  const connected = useSseConnected(resourceName);

  return (
    <Box
      component="span"
      sx={{
        display: "inline-flex",
        alignItems: "center",
        gap: 0.5,
        px: 1,
        py: 0.25,
        borderRadius: 1,
        border: 1,
        borderColor: connected ? "#4caf50" : "#f44336",
        color: connected ? "#4caf50" : "#f44336",
        fontSize: "0.75rem",
        fontWeight: 600,
      }}
    >
      <FiberManualRecordIcon sx={{ fontSize: 10 }} />
      {connected ? "Connected" : "Disconnected"}
    </Box>
  );
}