import classNames from 'classnames';
import './Button.scss';
import { ButtonProps } from './types';

/**
 * Primary UI component for user interaction
 */
const Button = ({
  variant = 'primary',
  backgroundColor,
  size = 'medium',
  onClick,
  label,
  disabled = false,
  children = null,
  type = 'button',
  className = '',
  style = {},
  transparentBackground = true,
  withIcon = false,
  iconName,
  iconPosition,
  ...props
}: ButtonProps) => {
  return (
    <button
      type={type}
      className={classNames(
        'storybook-button',
        `storybook-button--${size}`,
        `storybook-button--${variant}`,
        `${className}`,
        {
          'storybook-button--transparent': transparentBackground,
        }
      )}
      style={{ backgroundColor, ...style }}
      onClick={onClick}
      disabled={disabled}
      {...props}
    >
      {children || label}
    </button>
  );
};

export default Button;