import {IconProp} from '@fortawesome/fontawesome-svg-core';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {Row, Col, Button} from 'reactstrap';

interface ButtonProps {
  children?: React.ReactNode;
  icon?: IconProp;
  customIcon?: JSX.Element;
  position?: 'left' | 'right';
  [props: string]: any;
}
const ButtonWithIcon = ({
  icon,
  customIcon,
  children,
  position = 'left',
  ...props
}: ButtonProps) => {
  if ((icon || customIcon) && position === 'left') {
    return (
      <Button {...props}>
        <Row className="gx-2 align-items-end">
          <Col className="col-auto">
            {customIcon ? customIcon : <FontAwesomeIcon icon={icon} />}
          </Col>
          <Col className="col-auto">{children}</Col>
        </Row>
      </Button>
    );
  } else if ((icon || customIcon) && position === 'right') {
    return (
      <Button {...props}>
        <Row className="gx-2 align-items-end justify-content-between">
          <Col className="col-auto">{children}</Col>
          <Col className="col-auto">
            {customIcon ? customIcon : <FontAwesomeIcon icon={icon} />}
          </Col>
        </Row>
      </Button>
    );
  } else {
    return <Button {...props}>{children}</Button>;
  }
};

export default ButtonWithIcon;