// @flow
import React from 'react'
import Wrapper from './Wrapper'
import ImageWrapper from './components/Image'
import ContentWrapper from './components/Content'
import ImageUrl from './assets/explore-img.svg'

type Props = {
  role: string,
  className?: string,
  title?: string,
  textual?: string,
  imageUrl?: string,
  onClick?: Function
}

export const ExploreBox = ({
  role,
  className,
  title = 'Explore the technical whitepaper',
  textual = 'Get to know the mechanism we use to revolutionize asset trading',
  imageUrl = ImageUrl,
  onClick
}: Props) => {
  return (
    <Wrapper role={role} className={className} onClick={onClick}>
      <ImageWrapper imageUrl={imageUrl} />
      <ContentWrapper title={title} textual={textual} />
    </Wrapper>
  )
}

export default ExploreBox
