import React, { TextareaHTMLAttributes } from 'react';
import { getSystemStyle, SystemProps } from '../utils/systemProps';

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
  SystemProps
{ }

const Button: React.FC<ButtonProps> = ({ style, ...props }) => {
  style = {
    margin: '0.25rem 0.125rem',
    cursor: 'pointer',
    padding: '0.375rem 0.75rem',
    borderRadius: '0.25rem',
    textAlign: 'center',
    verticalAlign: 'middle',
    display: 'inline-block',
    userSelect: 'none',

    fontFamily: 'inherit',
    fontSize: '.95rem',
    lineHeight: '1.15',

    // Color
    color: '#fff',
    backgroundColor: '#1473ff',
    border: '1px solid #1473ff',
    boxSizing: 'border-box',

    transition: 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out',
    ...style,
  };

  const systemStyle = getSystemStyle(props, style);

  return (<button style={systemStyle} {...props} />);
};

export default Button;