import React from "react";
import { Box, Typography } from "@mui/material";
import { styled } from "@mui/system";
import { useServiceStatus } from "../contexts/ServiceStatusContext";

const StatusDot = styled("div")(({ status }) => ({
  width: 8,
  height: 8,
  borderRadius: "50%",
  backgroundColor:
    status === "healthy"
      ? "#4caf50"
      : status === "unhealthy"
      ? "#f44336"
      : "#9e9e9e",
  marginRight: 8,
}));

const ServiceLabel = styled(Box)({
  display: "flex",
  alignItems: "center",
  marginRight: 16,
  "& .MuiTypography-root": {
    fontSize: "0.75rem",
    color: "rgba(255, 255, 255, 0.7)",
  },
});

export function ServiceStatus() {
  const { services } = useServiceStatus();

  return (
    <Box
      sx={{
        position: "absolute",
        top: 16,
        left: 16,
        display: "flex",
        alignItems: "center",
        zIndex: 1000,
      }}
    >
      {Object.entries(services).map(([service, { status, latency, error }]) => (
        <ServiceLabel key={service}>
          <StatusDot status={status} />
          <Typography>
            {service.charAt(0).toUpperCase() + service.slice(1)}
            {/* {status === "healthy" && latency && ` (${latency}ms)`} */}
            {/* {error && ` - ${error}`} */}
          </Typography>
        </ServiceLabel>
      ))}
    </Box>
  );
}