import { Box, CardContent, Grid2 as Grid, Typography } from '@mui/material';

import icon1 from '../../../assets/images/svgs/icon-connect.svg';
import icon2 from '../../../assets/images/svgs/icon-user-male.svg';
import icon3 from '../../../assets/images/svgs/icon-briefcase.svg';
import icon4 from '../../../assets/images/svgs/icon-mailbox.svg';
import icon5 from '../../../assets/images/svgs/icon-favorites.svg';
import icon6 from '../../../assets/images/svgs/icon-speech-bubble.svg';

interface cardType {
  icon: string;
  title: string;
  digits: string;
  bgcolor: string;
}

const topcards: cardType[] = [
  {
    icon: icon2,
    title: 'Employees',
    digits: '96',
    bgcolor: 'primary',
  },
  {
    icon: icon3,
    title: 'Clients',
    digits: '3,650',
    bgcolor: 'warning',
  },
  {
    icon: icon4,
    title: 'Projects',
    digits: '356',
    bgcolor: 'secondary',
  },
  {
    icon: icon5,
    title: 'Events',
    digits: '696',
    bgcolor: 'error',
  },
  {
    icon: icon6,
    title: 'Payroll',
    digits: '$96k',
    bgcolor: 'success',
  },
  {
    icon: icon1,
    title: 'Reports',
    digits: '59',
    bgcolor: 'info',
  },
];

const TopCards = () => {
  return (
    (<Grid container spacing={3}>
      {topcards.map((topcard, i) => (
        <Grid
          key={i}
          size={{
            xs: 12,
            sm: 4,
            lg: 2
          }}>
          <Box bgcolor={topcard.bgcolor + '.light'} textAlign="center">
            <CardContent>
              <img src={topcard.icon} alt={topcard.icon} width="50" />
              <Typography
                color={topcard.bgcolor + '.main'}
                mt={1}
                variant="subtitle1"
                fontWeight={600}
              >
                {topcard.title}
              </Typography>
              <Typography color={topcard.bgcolor + '.main'} variant="h4" fontWeight={600}>
                {topcard.digits}
              </Typography>
            </CardContent>
          </Box>
        </Grid>
      ))}
    </Grid>)
  );
};

export default TopCards;
