import React from 'react'
import { ICategoriesCard } from './CategoriesCard.interface'
import { StyledCategoriesCard } from './CategoriesCard.theme'
import Heading from '../../atoms/Heading/Heading.component'
import Button from '@/components/atoms/Button'
import Icon from '@/components/atoms/Icon'

const CategoriesCard = ({
  title,
  buttonLabel,
  imageElement,
  linkElement
}: ICategoriesCard) => {
  return (
    <StyledCategoriesCard>
      {imageElement && imageElement}
      <div className="info-box">
        {title && <Heading size='h5'>{title}</Heading>}
        <Button
          variant={'link'}
          theme={'dark'}
          size={'small'}
          rightIcon={<Icon icon="icon-arrow-forward" />}
        >
          {buttonLabel && buttonLabel}
        </Button>
      </div>
      {linkElement && linkElement}
    </StyledCategoriesCard>
  )
}

export default CategoriesCard