import React from 'react'
import { IProjectCard } from './ProjectCard.interface'
import { StyledInfoBox, StyledProjectCard } from './ProjectCard.theme'

import Button from '@/components/atoms/Button/Button.component'
import Heading from '@/components/atoms/Heading/Heading.component'
import Icon from '@/components/atoms/Icon'

const ProjectCard = ({
  imageElement,
  title,
  linkElement,
  buttonLabel,
}: IProjectCard) => {
  return (
    <StyledProjectCard>
      {imageElement && imageElement}
      <StyledInfoBox>
        <Heading size="h5" className={'textEllipsis'}>
          {title}
        </Heading>
        <Button
          variant={'link'}
          theme={'dark'}
          size={'small'}
          rightIcon={<Icon icon="icon-arrow-forward" />}
        >
          {buttonLabel && buttonLabel}
        </Button>

      </StyledInfoBox>

      {linkElement && linkElement}
    </StyledProjectCard>
  )
}

export default ProjectCard