import React from 'react'
import Link from 'gatsby-link'

let defaultClasses =
  'px-6 py-3 leading-none inline-block text-sm no-underline uppercase'

let standardBtn = 'border hover:bg-teal hover:text-white hover:border-teal'

let filledBtn = 'text-grey-lightest bg-grey-darkest hover:bg-teal'

const Button = ({ ...props }) => (
  <Link
    to={props.url}
    className={`${props.standard ? standardBtn : ''} ${
      props.filled ? filledBtn : ''
    } ${defaultClasses} ${props.classes}`}
  >
    {props.text}
  </Link>
)

export default Button