import { Box, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";

export const StatItem = ({
  title,
  value,
  unit = "",
  color = "text",
  small = false,
  rightAlign = false,
  colon = false,
  bgGreen = false,
  bgPurple = false,
}) => {
  let backgroundColor = "background.paper";
  let textColor = `${color}.main`;

  if (bgGreen) {
    backgroundColor = "rgba(0,128,0,0.1)";
    textColor = "success.main";
  } else if (bgPurple) {
    backgroundColor = "#9370db";
    textColor = "primary.main";
  }

  return (
    <Grid item xs={12} sx={{ mb: 1 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          py: 0.5,
          px: 1,
          borderRadius: 1,
          backgroundColor,
          color: textColor,
          direction: rightAlign ? "rtl" : "ltr",
          fontWeight: bgGreen ? "bold" : "normal",
          height: "48px",
        }}
      >
        <Typography variant={small ? "caption" : "body1"} color={textColor}>
          {colon ? `${title} :` : title}
        </Typography>
        <Typography
          variant={small ? "caption" : "body1"}
          fontWeight="bold"
          color={textColor}
        >
          {value?.toLocaleString?.() || value} {unit}
        </Typography>
      </Box>
    </Grid>
  );
};
