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

export const KillingInformation = ({ boxStats }) => (
  <Box
    sx={{
      flex: "1 1 20%",

      minWidth: {
        mnd: "500px",
      },
      maxWidth: {
        md: "41%",
      },
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      p: SPACING.SMALL,
      boxSizing: "border-box",
      display: "flex",
      flexDirection: "column",
      gap: 2,
      height: "300px",
    }}
  >
    <Typography textAlign="start" variant="h6" color="primary.main">
      اطلاعات کشتار داخل استان و خرید زنده خارج از استان
    </Typography>

    <Box
      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: "rgba(86, 156, 221, 0.1)",
        }}
      >
        <Typography color="primary.main"> تعداد سفارشات:</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.killingInfo?.count?.toLocaleString() || 0}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(86, 156, 221, 0.1)",
        }}
      >
        <Typography color="primary.main">حجم کل کشتار (قطعه):</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.killingInfo?.quantity?.toLocaleString() || 0}
        </Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(86, 156, 221, 0.1)",
        }}
      >
        <Typography color="primary.main">وزن کل کشتار(کیلوگرم) :</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.killingInfo?.weight?.toLocaleString() || 0}
        </Typography>
      </Box>

      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(86, 156, 221, 0.1)",
        }}
      >
        <Typography color="primary.main"> میانگین وزن (کیلوگرم):</Typography>
        <Typography color="primary.main" fontWeight="bold">
          {boxStats?.killingInfo?.avgWeight?.toLocaleString() || 0}
        </Typography>
      </Box>
    </Box>
  </Box>
);
