import React from "react";
import { Button as ButtonStyle } from "./ButtonStyles";

export interface ButtonProps {
  title?: string;
  name?: string;
  type?: "button" | "submit" | "reset" | undefined;
  buttonType?: "primary" | "secondary";
  size?: "small" | "regular";
  onClick?: (e: any) => void;
  disabled?: boolean;
  style?: object; // additional style
  testId?: string;
  children?: string; // necessary to allow button to have child element
}

export const Button: React.FC<ButtonProps> = (props) => {
  const { style, name, testId, type, onClick, title } = props;
  return (
    <ButtonStyle
      style={style || {}}
      name={name || ""}
      data-testid={testId}
      type={type || "button"}
      onClick={(event) => {
        if (onClick) onClick(event);
      }}
      {...props}
    >
      {title}
    </ButtonStyle>
  );
};
