import { Paper, Grid, makeStyles, Typography } from "@material-ui/core";
import { ICountDataPaperProps } from "./CountDataPaper.types";

const useStyles = makeStyles(() => ({
    paper: {
        height: '2vh'
    },
    topRow: {
        textAlign: 'center',
    },
    bottomRow: {
        color: 'white',
        backgroundColor: (props: ICountDataPaperProps) => props.color,
        padding: '10px 0',
        textAlign: 'center'
    },
}))

function CountDataPaper(props: ICountDataPaperProps) {
    const classes = useStyles(props)

    return (
        <Paper className={classes.paper} elevation={5}>
            <Grid
                container
                justifyContent="space-evenly"
                 
            >
                <Grid className={classes.topRow} item md={12}>
                    <Typography>
                        412
                    </Typography>
                </Grid>
                <Grid className={classes.bottomRow} item md={12}>
                    <Typography>
                        Text
                    </Typography>
                </Grid>
            </Grid>
        </Paper>
    )
}


export default CountDataPaper