import React from 'react'
import { IFeaturedCollectionCard } from './FeaturedCollectionCard.interface'
import { StyledFeaturedCollectionCard } from './FeaturedCollectionCard.theme'
import Heading from '../../atoms/Heading/Heading.component'

const FeaturedCollectionCard = ({
  title,
  imageElement,
  linkElement
}: IFeaturedCollectionCard) => {
  return (
    <StyledFeaturedCollectionCard>
      {imageElement}
      <div className="info-box">
        {title && (
          <Heading tag="h5" size="h5">
            {title}
          </Heading>
        )}
      </div>
      {linkElement && linkElement}
    </StyledFeaturedCollectionCard>
  )
}

export default FeaturedCollectionCard