import { Box, Typography } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import "./StatItem.scss";

export const StatItem = ({
  label,
  value,
  change,
}: {
  label: string;
  value: string | number;
  change: string;
}) => (
  <Box className="static-item">
    <Typography variant="body2" fontWeight="bold" color="text.secondary">
      {label}
    </Typography>
    <Typography variant="h6" fontWeight="bold" mt={0.5}>
      {value}
    </Typography>
    <Box className="static-item__percentage">
      <ArrowDropDownIcon fontSize="small" />
      {/* <ArrowDropUp fontSize='small' /> */}
      <Typography variant="caption">{change}</Typography>
    </Box>
  </Box>
);