// @flow
import React from 'react'
import Wrapper from './Wrapper'
import ImageWrapper from './components/Image'
import ContentWrapper from './components/ContentWrapper'
import BoxImage from './assets/box-image.svg'

type Props = {
  role: string,
  className?: string,
  isActive?: boolean,
  imageURL?: string,
  title?: string,
  textual?: string,
  linkTxt?: string,
  onClick?: () => {}
}

export const TabBox = ({
  role,
  className,
  isActive = true,
  imageURL = BoxImage,
  title = 'Real Estate',
  textual = 'Buy Real Estate in form of Funds or REITS and get your monthly rent',
  linkTxt = 'Read more',
  onClick
}: Props) => {
  return (
    <Wrapper
      role={role}
      className={className}
      isActive={isActive}
      onClick={onClick}
    >
      <ImageWrapper imageURL={imageURL} />
      <ContentWrapper title={title} textual={textual} linkTxt={linkTxt} />
    </Wrapper>
  )
}

export default TabBox
