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

export const InfoBox = ({ icon: Icon, label, value, iconSx }) => (
  <Box
    display="flex"
    alignItems={iconSx ? "flex-start" : "center"}
    gap={1}
    px={1.5}
    py={0.5}
    bgcolor="#f5f5f5"
    borderRadius={1}
  >
    <Icon color="action" sx={iconSx} />
    <Box>
      <Typography variant="caption" color="text.secondary">
        {label}
      </Typography>
      <Typography variant="body1">{value || "-"}</Typography>
    </Box>
  </Box>
);
