import React, { CSSProperties, ReactNode, MouseEventHandler } from 'react';

// styles
import './styles.scss';

interface ButtonProps {
  children?: ReactNode;
  style?: CSSProperties;
  onClick?: MouseEventHandler<HTMLDivElement>;
  className?: string;
  disabled?: boolean;
  backdrop?: boolean;
  currentTheme?: string | null | undefined;
}

const Button: React.FC<ButtonProps> = ({
  children = '',
  style = {},
  onClick,
  className = '',
  disabled = false,
  backdrop = true,
  currentTheme = 'default'
}) => {
  return (
    <>
      {
        currentTheme === 'v2' ? (
          <div
            className={`basic-button ${currentTheme === 'v2' && 'new-theme-button'} ${className} ${disabled ? 'disabled' : ''}`}
            onClick={disabled ? undefined : onClick}
            style={style}
          >
            {children}
            {/* {backdrop && <span className="backdrop" />} */}
          </div>
        )
          :
          (
            <div
              className={`basic-button ${className} ${disabled ? 'disabled' : ''}`}
              onClick={disabled ? undefined : onClick}
              style={style}
            >
              {children}
              {backdrop && <span className="backdrop" />}
            </div>
          )
      }
    </>
  );
};

export default Button;