import { Box, Typography } from "@mui/material";
import { SPACING } from "../../../../data/spacing";

export const StatBox = ({
  title,
  value,
  textColor,
  color = "primary",
  unit,
}) => {
  return (
    <Box
      sx={{
        width: "100%",
        backgroundColor: color === "primary" ? "#EAEFFF" : "#E6FAF5",
        padding: SPACING.SMALL,
        maxWidth: {
          md: "880px",
        },
        margin: { xs: "6px", lg: "10px" },
        borderRadius: "16px",
        textAlign: "center",
        border: "1px solid",
        borderColor: "divider",
        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
        "&:hover": {
          boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.15)",
        },
      }}
    >
      <Typography fullWidth variant="body1" sx={{ fontWeight: "bold" }}>
        {title}
      </Typography>
      <Typography
        variant="body2"
        sx={{
          marginTop: SPACING.SMALL,
          fontWeight: "bold",
          color: textColor || "primary",
        }}
      >
        {value.toLocaleString()}
      </Typography>
      {unit && (
        <Typography
          variant="body2"
          sx={{
            marginTop: SPACING.SMALL,
            fontWeight: "bold",
            color: textColor || "primary",
          }}
        >
          {unit}
        </Typography>
      )}
    </Box>
  );
};
