import React from 'react';
import styled from 'styled-components';
import { uiFonts } from '../constants/uiFonts';

export enum ButtonTypes {
  RPGUIButton = 'rpgui-button',
  RPGUIGoldButton = 'rpgui-button golden',
}

export interface IButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  disabled?: boolean;
  children: React.ReactNode;
  buttonType: ButtonTypes;
  onPointerDown?: (e: any) => void;
}

export const Button = ({
  disabled = false,
  children,
  buttonType,
  onPointerDown,
  ...props
}: IButtonProps) => {
  return (
    <ButtonContainer
      className={`${buttonType}`}
      disabled={disabled}
      {...props}
      onPointerDown={onPointerDown}
    >
      <p>{children}</p>
    </ButtonContainer>
  );
};

const ButtonContainer = styled.button`
  height: 45px;
  font-size: ${uiFonts.size.small};
`;
