text: import React from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import { makeStyles } from '@material-ui/styles';
  import {
    Card,
    CardContent,
    Grid,
    Typography,
    Avatar,
    LinearProgress
  } from '@material-ui/core';
  import InsertChartIcon from '@material-ui/icons/InsertChartOutlined';
  
  const useStyles = makeStyles(theme => ({
    root: {
      height: '100%'
    },
    content: {
      alignItems: 'center',
      display: 'flex'
    },
    title: {
      fontWeight: 700
    },
    avatar: {
      backgroundColor: theme.palette.primary.main,
      color: theme.palette.primary.contrastText,
      height: 56,
      width: 56
    },
    icon: {
      height: 32,
      width: 32
    },
    progress: {
      marginTop: theme.spacing(3)
    }
  }));
  
  const TotalSoldWholesale = props => {
    const { className, totalSoldWholesale, ...rest } = props;
  
    const classes = useStyles();
  
    return (
      <Card {...rest} className={clsx(classes.root, className)}>
        <CardContent>
          <Grid container justify="space-between">
            <Grid item>
              <Typography
                className={classes.title}
                color="textSecondary"
                gutterBottom
                variant="body2">
                TOTAL VENDIDO AL POR MAYOR
              </Typography>
              <Typography variant="h3">{`L${totalSoldWholesale}`}</Typography>
            </Grid>
            <Grid item>
              <Avatar className={classes.avatar}>
                <InsertChartIcon className={classes.icon} />
              </Avatar>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    );
  };
  
  TotalSoldWholesale.propTypes = {
    className: PropTypes.string
  };
  
  export default TotalSoldWholesale;
  