'use client'
import Image from "next/image";
import { Box, CardContent, Grid, Typography } from "@mui/material";


const TopCardsNew2 = ({ todaysDeposits, todaysCashouts }: any) => {
  return (
    <Grid container spacing={2}>
      {/* {topcards.map((topcard, i) => ( */}

      <Grid
        key={Math.random()}
        size={{
          xs: 12,
          sm: 6,
          lg: 6
        }}
        >
        <Box bgcolor={"success.light"} textAlign="center" >
          <CardContent>
            {/* <Image src={topcard.icon} alt={"topcard.icon"} width="50" height="50" /> */}
            <Typography
              // color={topcard.bgcolor + ".main"}
              mt={1}
              variant="subtitle1"
              fontWeight={600}
            >
              {/* {topcard.title} */}
              Signin / Signout
            </Typography>
            <Typography
              // color={topcard.bgcolor + ".main"}
              variant="h2"
              fontWeight={700}
            >
              <br />
              {todaysDeposits}
              {/* {topcard.digits} */}
            </Typography>
          </CardContent>
        </Box>
      </Grid>
      {/* <Grid
        key={Math.random()}
        size={{
          xs: 12,
          sm: 6,
          lg: 6
        }}>
        <Box bgcolor={"warning.light"} textAlign="center">
          <CardContent>
            
            <Typography
              // color={topcard.bgcolor + ".main"}
              mt={1}
              variant="subtitle1"
              fontWeight={600}
            >
             
              Today's Cashouts
            </Typography>
            <Typography
              // color={topcard.bgcolor + ".main"}
              variant="h2"
              fontWeight={700}
            >
              <br />
              {todaysCashouts}
              
            </Typography>
          </CardContent>
        </Box>
      </Grid> */}

      {/* ))} */}
    </Grid>
  );
};

export default TopCardsNew2;
