import React from 'react'
import classNames from 'classnames'
import { Icon, Button } from 'antd'
import './BoxButton.less'
import * as icons from '../../icons'

export default ({ title, hint, arrow, icon, onClick, className, learnMore }) => (
  <Button
    ghost
    type='primary'
    className={classNames({
      [className]: className,
      BoxButton: true,
      primary: true
    })}
    onClick={onClick}
  >
    {icon && (
      icons[icon]
        ? (
          <img
            className={classNames({ 'Box-icon': true, 'demio-icon': true })}
            style={{ width: 36 }}
            src={icons[icon]}
          />
        )
        : (
          <i
            className={classNames({ 'BoxButton-icon': true, dicon: true, [icon]: icon })}
            style={{ fontSize: 36 }}
          />
        )
    )}
    <div className="BoxButton-content">
      <div className="BoxButton-title">{title}</div>
      {hint && <div className="BoxButton-hint">{hint}</div>}
    </div>
    {arrow && (
      <div className='BoxButton-arrow'>
        <Icon
          type='arrow-right'
          className={classNames({ 'BoxButton-arrow-icon': true, animated: true, slideInLeft: true })}
        />
      </div>
    )}
    {learnMore && (
      <div>
        <div className="BoxButton-learn-more">
          LEARN MORE
        </div>
        <i className="fa fa-lock learn-more-icon"></i>
      </div>
    )}
  </Button>
)