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

const inventoryItems = [
  {
    label: "حجم آماده کشتار بزرگتر از 40 روز (قطعه) :",
    key: "leftOverBetweenFortySeventyFive",
  },
  {
    label: "وزن تقریبی کشتار بزرگتر از 40 روز (کیلوگرم) :",
    key: "weightBetweenFortySeventyFive",
  },
  {
    label: "میانگین وزن مرغداری‌های آماده کشتار:",
    key: "aveWeight",
    suffix: " کیلوگرم",
  },
  { label: "وزن گوشت قابل تولید:", key: "carcassWeight", suffix: " کیلوگرم" },
];

const InventoryRow = ({ label, value, suffix = "" }) => (
  <Box
    sx={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      minHeight: 40,
      px: 2,
      py: 0.5,
      borderRadius: 1,
      backgroundColor: "rgba(0, 128, 0, 0.1)",
    }}
  >
    <Typography
      color="text.primary"
      sx={{ fontSize: "0.85rem", textAlign: "left" }}
    >
      {label}
    </Typography>
    <Typography
      fontWeight="bold"
      color="success.main"
      sx={{ fontSize: "0.85rem" }}
    >
      {value?.toLocaleString() || 0}
      {suffix}
    </Typography>
  </Box>
);

export const InventorySection = ({ boxStats, sx }) => (
  <Box
    sx={{
      width: "100%",
      borderRadius: 2,
      border: "1px solid",
      borderColor: "divider",
      px: SPACING.MEDIUM,
      py: SPACING.SMALL,
      display: "flex",
      flexDirection: "column",
      boxSizing: "border-box",
      backgroundColor: "rgba(0, 128, 0, 0.05)",
      textAlign: "left",
      ...sx,
    }}
  >
    <Typography
      variant="subtitle1"
      color="text.primary"
      sx={{ mb: 2, fontWeight: 600, fontSize: "1rem" }}
    >
      موجودی
    </Typography>

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