import { Paper, Typography } from "@mui/material";
import { PropTypes } from "prop-types";
import { SPACING } from "../../data/spacing";
import { Grid } from "../grid/Grid";

export const ButtonWithIcon = ({ Icon, onClick, title }) => {
  return (
    <Grid
      container
      sx={{ cursor: "pointer", width: { xs: "100%", sm: "auto" } }}
      onClick={onClick}
    >
      <Paper
        elevation={3}
        sx={{
          flexGrow: 1,
          justifyContent: "center",
          alignItems: "center",
          display: "flex",
        }}
      >
        <Grid
          container
          p={SPACING.SMALL}
          gap={SPACING.SMALL}
          //   backgroundColor={palette.primary.main}
        >
          <Icon color={"primary"} />
          <Typography variant="body1" color="primary">
            {title}
          </Typography>
        </Grid>
      </Paper>
    </Grid>
  );
};

ButtonWithIcon.propTypes = {
  Icon: PropTypes.any,
  onClick: PropTypes.func,
  title: PropTypes.string,
};
