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

export const DashboardAllocationWithOutBar = ({ boxStats }) => (
  <Box
    sx={{
      flex: "1 1 15%",
      minWidth: { xs: "100%", sm: "15%" },
      maxWidth: { xs: "100%", md: "16%" },
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      p: SPACING.MEDIUM,
      pt: 4,
      display: "flex",
      flexDirection: "column",
      boxSizing: "border-box",
      backgroundColor: "rgba(0, 128, 0, 0.05)",
      textAlign: "left",
    }}
  >
    <Typography variant="h6" color="primary.main" sx={{ mb: 2 }}>
      تخصیصات بدون بار
    </Typography>

    <Typography variant="body2" mt={3} bgGreen>
      تعداد تخصیصات
    </Typography>
    <Typography variant="h6" mt={2} color="success.main">
      {boxStats?.provinceKillRequestWithoutBar?.count?.toLocaleString() || 0}
    </Typography>

    <Typography variant="body2" mt={3} bgGreen>
      حجم تخصیصات(قطعه)
    </Typography>
    <Typography variant="h6" mt={2} color="success.main">
      {boxStats?.provinceKillRequestWithoutBar?.quantity?.toLocaleString() || 0}
    </Typography>

    <Typography variant="body2" mt={3} bgGreen>
      وزن تخصیصات(کیلوگرم)
    </Typography>
    <Typography variant="h6" mt={2} color="success.main">
      {boxStats?.provinceKillRequestWithoutBar?.indexWeight?.toLocaleString() ||
        0}{" "}
      کیلوگرم
    </Typography>
  </Box>
);
