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

export const DashboardProvinceSellOut = ({ boxStats }) => (
  <Box
    sx={{
      flex: "1 1 49%",
      minWidth: { xs: "100%", sm: "47%" },
      maxWidth: { xs: "100%", md: "47%" },
      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 textAlign="start" variant="h6" color="primary.main">
      فروش زنده به خارج استان
    </Typography>

    <Box
      mt={2}
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
        overflowY: "auto",
        flex: 1,
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "#fff",
        }}
      >
        <Typography color="primary.main"> تعداد بار :</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.outLiveBar?.count?.toLocaleString() || 0}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "#fff",
        }}
      >
        <Typography color="primary.main">حجم بار(قطعه) :</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.outLiveBar?.quantity?.toLocaleString() || 0}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "#fff",
        }}
      >
        <Typography color="primary.main">وزن(کیلوگرم) :</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.outLiveBar?.weight?.toLocaleString() || 0}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "#fff",
        }}
      >
        <Typography color="primary.main">میانگین وزن(کیلوگرم):</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.outLiveBar?.avgWeight?.toLocaleString() || 0}
        </Typography>
      </Box>
    </Box>
  </Box>
);
