import React from 'react'
import PropTypes from 'prop-types'
import './button.scss'
import tw, { styled } from 'twin.macro'

const Button = (props) => {
  const { text } = props

  const StyledButton = styled.button(({ twProps }) => [twProps])

  return (
    <button
      className='btn'
      // style={{
      //   background: 'green',
      //   padding: '30px',
      //   border: 'none',
      //   fontSize: '28px',
      // }}
    >
      {text}
    </button>

    //   <StyledButton
    //   twProps={tw`bg-primary`}
    //  >
    //     {text}
    //   </StyledButton>
  )
}

Button.propTypes = {
  text: PropTypes.string,
}

Button.defaultProps = {
  text: 'Example Button',
}

export default Button
