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

const warehouseItems = [
  { label: "وزن ورودی به انبار:", key: "enterWarehouseWeight" },
  { label: "وزن فروش به خارج استان:", key: "outSellWeight" },
  { label: "وزن توزیع به داخل استان:", key: "allocationWeight" },
  { label: "وزن مانده در انبار کشتارگاه:", key: "leftOverWarehouseWeight" },
];

const WarehouseRow = ({ label, value }) => (
  <Box
    sx={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      minHeight: 40,
      px: 2,
      py: 0.5,
      borderRadius: 1,
      backgroundColor: "rgba(147, 112, 219, 0.1)",
    }}
  >
    <Typography
      color="text.primary"
      sx={{ fontSize: "0.85rem", textAlign: "left" }}
    >
      {label}
    </Typography>
    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
      <Typography
        color="primary.main"
        fontWeight="bold"
        sx={{ fontSize: "0.85rem" }}
      >
        {value?.toLocaleString() || 0}
      </Typography>
      <Typography sx={{ fontSize: "0.75rem" }} color="text.secondary">
        کیلوگرم
      </Typography>
    </Box>
  </Box>
);

export const WarehouseInfoSection = ({ boxStats, sx }) => (
  <Box
    sx={{
      width: "100%",
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      p: "16px",
      boxSizing: "border-box",
      display: "flex",
      flexDirection: "column",
      gap: 2,
      ...sx,
    }}
  >
    <Typography
      variant="subtitle1"
      color="text.primary"
      sx={{ fontWeight: 600, fontSize: "1rem" }}
      textAlign="left"
    >
      اطلاعات انبار و توزیع امروز
    </Typography>

    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
        flex: 1,
      }}
    >
      {warehouseItems.map((item) => (
        <WarehouseRow
          key={item.key}
          label={item.label}
          value={boxStats?.warehouseInformation?.[item.key]}
        />
      ))}
    </Box>
  </Box>
);
