import React from "react";
import PropTypes from "prop-types";
import {
  PrimaryButtonWithIconContainer,
  IconStyled,
  PrimaryButtonWithIconStyled,
} from "./PrimaryButtonWithIcon.styled";

const PrimaryButtonWithIcon = (props) => {
  return (
    <PrimaryButtonWithIconContainer
      style={props.containerStyle}
      className={props.className}
    >
      <PrimaryButtonWithIconStyled sx={props.style} {...props.buttonProps} onClick={props.onClick}>
        <IconStyled style={props.iconStyle}>{props.icon}</IconStyled>
        {props.children}
      </PrimaryButtonWithIconStyled>
    </PrimaryButtonWithIconContainer>
  );
};

PrimaryButtonWithIcon.propTypes = {
  children: PropTypes.node,
  icon: PropTypes.node,
  className: PropTypes.string,
  containerStyle: PropTypes.any,
  style: PropTypes.any,
  iconStyle: PropTypes.any,
  buttonProps: PropTypes.any,
  onClick: PropTypes.func,
};

export default PrimaryButtonWithIcon;