| import React from 'react'
import Proptypes from 'prop-types'
import styled from 'styled-components'
import ArrowContentStyled from './arrow-content.styled'
 
const ArrowContent = ({ children, ...rest }) => (
  <ArrowContentStyled {...rest} >
    <div className='content'>
      {children}
    </div>
    <div className="arrow" />
  </ArrowContentStyled>
)
 
ArrowContent.propTypes = {
  color: Proptypes.string,
  size: Proptypes.number,
  hAlign: Proptypes.string.isRequired,
  vAlign: Proptypes.string.isRequired,
  hDistance: Proptypes.string,
}
 
ArrowContent.defaultProps = {
  color: '#c5d0e1',
  size: 5,
  hAlign: 'center',
  vAlign: 'bottom',
  hDistance: '20px'
}
 
export { ArrowContent }
  |