import { Box, Typography } from "@mui/material";

export const WarehouseInfoSection = ({ boxStats }) => (
  <Box
    sx={{
      flex: { xs: "1 1 100%", md: "1 1 30%" },
      minWidth: { xs: "100%", sm: "340px" },
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      p: "16px",
      // backgroundColor: "#EAEFFF",
      boxSizing: "border-box",
      display: "flex",
      flexDirection: "column",
      gap: 2,
      // height: "100%",
    }}
  >
    <Typography
      variant="h6"
      color="primary.main"
      sx={{ fontSize: { xs: "1rem", lg: "1rem" } }}
      textAlign="left"
    >
      اطلاعات انبار و توزیع امروز
    </Typography>

    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
        overflowY: "auto",
        flex: 1,
        pr: 1,
      }}
    >
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(147, 112, 219, 0.1)",
        }}
      >
        <Typography
          color="primary.main"
          sx={{ fontSize: { xs: "0.875rem", lg: "1rem" } }}
        >
          وزن ورودی به انبار:
        </Typography>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Typography color="primary.main" fontWeight="bold">
            {boxStats?.warehouseInformation?.enterWarehouseWeight?.toLocaleString() ||
              0}
          </Typography>
          <Typography variant="caption">کیلوگرم</Typography>
        </Box>
      </Box>

      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(147, 112, 219, 0.1)",
        }}
      >
        <Typography
          color="primary.main"
          sx={{ fontSize: { xs: "0.875rem", lg: "1rem" } }}
        >
          وزن فروش به خارج استان:
        </Typography>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Typography color="primary.main" fontWeight="bold">
            {boxStats?.warehouseInformation?.outSellWeight?.toLocaleString() ||
              0}
          </Typography>
          <Typography variant="caption">کیلوگرم</Typography>
        </Box>
      </Box>

      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(147, 112, 219, 0.1)",
        }}
      >
        <Typography
          color="primary.main"
          sx={{ fontSize: { xs: "0.875rem", lg: "1rem" } }}
        >
          وزن توزیع به داخل استان:
        </Typography>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Typography color="primary.main" fontWeight="bold">
            {boxStats?.warehouseInformation?.allocationWeight?.toLocaleString() ||
              0}
          </Typography>
          <Typography variant="caption">کیلوگرم</Typography>
        </Box>
      </Box>

      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          height: 48,
          px: 2,
          borderRadius: 1,
          backgroundColor: "rgba(147, 112, 219, 0.1)",
        }}
      >
        <Typography
          color="primary.main"
          sx={{ fontSize: { xs: "0.875rem", lg: "1rem" } }}
        >
          وزن مانده در انبار کشتارگاه:
        </Typography>
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <Typography color="primary.main" fontWeight="bold">
            {boxStats?.warehouseInformation?.leftOverWarehouseWeight?.toLocaleString() ||
              0}
          </Typography>
          <Typography variant="caption">کیلوگرم</Typography>
        </Box>
      </Box>
    </Box>
  </Box>
);
