import React from 'react'
import { Grid, Card, Icon, IconButton, Tooltip } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { Link } from 'react-router-dom'

const useStyles = makeStyles(({ palette, ...theme }) => ({
    icon: {
        fontSize: '44px',
        opacity: 0.6,
        color: palette.primary.main,
    },
}))

const StatCards = ({ list }) => {
    const classes = useStyles()

    return (
        <Card
            className="flex flex-wrap justify-between items-center p-sm-24 bg-paper cursor-pointer"
            elevation={6}
        >
            <Grid container spacing={3} className="mb-3">
                {list.map((item, index) => (
                    <Grid item xs={12} md={6} key={index}>
                        {/* <Link to={item.params}> */}
                            <Card
                                className="flex flex-wrap justify-between items-center p-sm-24 bg-paper cursor-pointer"
                                elevation={6}
                            >
                                <div className="flex items-center">
                                    <Icon className={classes.icon}>group</Icon>
                                    <div className="ml-3">
                                        <small className="text-muted">
                                            {item.title}
                                        </small>
                                    </div>
                                </div>
                                <Tooltip title="View Details" placement="top">
                                    <IconButton>
                                        <Icon>arrow_right_alt</Icon>
                                    </IconButton>
                                </Tooltip>
                            </Card>
                        {/* </Link> */}
                    </Grid>
                ))}
            </Grid>
        </Card>
    )
}

export default StatCards
