// material-ui
import { Box, Card, CardContent, Grid, Typography } from '@mui/material';

// ===========================|| HOVER SOCIAL CARD ||=========================== //

const HoverSocialCard = ({
  primary,
  secondary,
  percentage,
  // iconPrimary,
  color,
  sx
}) => {
  // const IconPrimary = iconPrimary;
  // const primaryIcon = iconPrimary ? <IconPrimary /> : null;

  return (
    <Card
      elevation={0}
      sx={{
        background: color,
        position: 'relative',
        color: '#fff',
        '&:hover svg': {
          opacity: 1,
          transform: 'scale(1.1)'
        },
        ...sx
      }}
    >
      <CardContent>
        <Box
          sx={{
            position: 'absolute',
            right: 15,
            top: 25,
            color: '#fff',

            '& svg': {
              width: 36,
              height: 36,
              opacity: 0.5,
              transition: 'all .3s ease-in-out'
            }
          }}
        >
          <Typography variant="h2" color="inherit" sx={{ fontSize: { xs: 20, md: 25 } }}>
            {/* {percentage.toString()} % */}
            {percentage && typeof percentage === 'number' ? `${percentage.toString()} %` : percentage}
          </Typography>
          {/* {primaryIcon} */}
        </Box>
        <Grid container spacing={0}>
          <Grid item xs={12}>
            <Typography variant="h3" color="inherit" sx={{ fontSize: { xs: 16, md: 20 } }}>
              {secondary}
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="subtitle2" color="inherit">
              {primary}
            </Typography>
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default HoverSocialCard;