import React from 'react'
import { ICatalogueCard } from './CatalogueCard.interface'
import { StyledCatalogueCard } from './CatalogueCard.theme'
import Button from '@/components/atoms/Button'
import Icon from '@/components/atoms/Icon/Icon.component'
import { StyledInfoBox } from '../ProjectCard/ProjectCard.theme'

const CatalogueCard = ({
  buttonLabel,
  imageElement,
  linkElement
}: ICatalogueCard) => {
  return (
    <StyledCatalogueCard>
      {imageElement && imageElement}
      <StyledInfoBox>
        <Button
          variant={'link'}
          theme={'dark'}
          size={'small'}
          rightIcon={<Icon icon="icon-arrow-down"></Icon>}
        >
          {buttonLabel && buttonLabel}
        </Button>
      </StyledInfoBox>
      {linkElement && linkElement}
    </StyledCatalogueCard>
  )
}

export default CatalogueCard