import React, { HTMLAttributes, CSSProperties, MouseEventHandler, ReactElement, useState } from "react";


export interface IBaseButtonProps {
  className?: string;
}


type MergedHTMLAttributes = Omit<
  HTMLAttributes<HTMLDivElement>,
  'onPause'
>;

interface IButtonProps extends IBaseButtonProps, MergedHTMLAttributes {

}


/**
 * @return ReactElement
 * @constructor
 * @param props
 */
export const Button = (props: IButtonProps): ReactElement => {

  const {
    children,
    className,
    onClick = () => void 0,
    style = {}
  } = props;

  const [scale, setScale] = useState("unset");

  const onTouchStart = () => {
    setScale("scale(0.9,0.9)");
  };

  const onTouchEnd = () => {
    setScale("unset");
  };

  const onTouchCancel = onTouchEnd;

  return <div
    className={className}
    onTouchStart={onTouchStart}
    onTouchEnd={onTouchEnd}
    onTouchCancel={onTouchCancel}
    onClick={onClick}
    style={{
      transitionDuration: "0.5s",
      transform: scale,
      ...style,
    }}
  >
    {children}
  </div>;
};
