import React from 'react'
import { ICollectionCard } from './CollectionCard.interface'
import { StyledCollectionCards } from './CollectionCard.theme'
import Button from '@/components/atoms/Button'
import Icon from '@/components/atoms/Icon'
import Heading from '@/components/atoms/Heading'

const CollectionCards = ({
  title,
  description,
  backgroundColor,
  imageElement,
  type,
  linkElement,
  buttonLabel,
  className
}: ICollectionCard) => {
  const isCover = type === 'cover'

  return (
    <StyledCollectionCards className={className} $backgroundColor={backgroundColor}>
      {imageElement && imageElement}
      {!isCover && (
        <div className="absolute">
          <Heading tag="span" className="title">
            {title}
          </Heading>
          <Heading tag="h2" size="h1" className="description">
            {description}
          </Heading>

          <Button
            variant={'link'}
            theme={'dark'}
            size={'small'}
            rightIcon={<Icon icon="icon-arrow-forward" />}
          >
            {buttonLabel && buttonLabel}
          </Button>
        </div>
      )}
      {linkElement && linkElement}
    </StyledCollectionCards>
  )
}

export default CollectionCards