import React from "react";
import { styled } from "@mui/material/styles";
import { Button, Typography } from "@mui/material";

const StyledButton = styled(Button)({
  color: "darkslategray",
  backgroundColor: "aliceblue",
  padding: 8,
  borderRadius: 4,
});

const divStyle = {
  color: "blue",
  borderRadius: "20px 20px 20px 20px",
  border: "1px solid black",
  maxWidth: "150px",
  margin: "20px",
  padding: "10px",
};

export const StyledComponent = (props) => {
  const { text, disabled, onClick } = props;
  return (
    <div classes={divStyle}>
      <StyledButton
        disabled={disabled}
        onClick={onClick}
        color="primary"
        variant="contained"
        size="medium"
      >
        <Typography variant="button">
          {text || "This is a styled component from MUI"}
        </Typography>
      </StyledButton>
    </div>
  );
};