import React from 'react';
import { Button as MuiButton } from '@mui/material';
import { ButtonBaseProps } from '../interfaces';
import { styled } from '@mui/material/styles';

const ButtonStyled = styled(MuiButton)({
  textTransform: 'none',
  '& .MuiButton-sizeLarge': {
    height: '75px',
    backgroundColor: 'red',
  },
});

export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
  
  return (
    <ButtonStyled
      {...props}
      sx={{
        color: props.variant === 'contained' ? '#FFFF' : props.color,
      }}
    >
      {label ? label : children}
    </ButtonStyled>
  );
};