import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '../../atoms/button/Button';

const propTypes = {
  children: PropTypes.string,
  className: PropTypes.string,
  icon: PropTypes.element,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  children: '',
  className: '',
  icon: null,
  tag: Button,
};

export const PagePopinActionButton = ({
  children, className, icon, tag: Tag, ...props
}) => (
  <div className="sui-o-page-popin__action">
    <Tag className={`sui-o-page-popin__button as--show-label@xs ${className}`} {...props}>
      {!!icon && (
        <span className="sui-o-page-popin__button-icon">
          {icon}
        </span>
      )}
      {!!children && (
        <span className="sui-o-page-popin__button-label">
          {children}
        </span>
      )}
    </Tag>
  </div>
);

PagePopinActionButton.propTypes = propTypes;
PagePopinActionButton.defaultProps = defaultProps;
