import Button from '@/components/atoms/Button'
import Flex from '@/components/atoms/Flex'
import Heading from '@/components/atoms/Heading'
import { IBlogCard } from './BlogCard.interface'
import Icon from '@/components/atoms/Icon'
import ImageWrapper from '@/components/atoms/ImageWrapper'
import React from 'react'
import RichText from '@/components/atoms/RichText/RichText.component'
import Separator from '@/components/atoms/Separator/Separator.component'
import Spacer from '@/components/atoms/Spacer'
import { StyledBlogCard } from './BlogCard.theme'
import { colors } from '@/styles/variables'

const BlogCard = ({
  variant,
  date,
  categories = [],
  title,
  imageElement,
  linkElement,
  description,
  author,
  buttonLabel
}: IBlogCard) => {

  return (
    <StyledBlogCard variant={variant}>
      <div className="image-element">
        <ImageWrapper aspectRatioHeight={69}>{imageElement}</ImageWrapper>
      </div>

      <Flex
        direction="column"
        align="baseline"
        gap={'8px'}
        style={{ padding: '16px' }}
      >
        <Flex
          justify="space-between"
          align="center"
          className={'w-100 news-info'}
          style={{ color: colors.gray50 }}
          wrap='nowrap'
          gap='8px'
        >
          <Heading tag={'span'} size={'captions'} className={'clamp-line'} >
            {categories.map((category, index) => category.toUpperCase() + (index === categories.length - 1 ? '' : ' - '))}
          </Heading>
          <Heading tag={'span'} size={'captions'} className='text-no-wrap'>
            {date?.toUpperCase()}
          </Heading>
        </Flex>

        <Heading tag={'h5'} size={'h5'} className={'clamp-line'}>
          {title?.toUpperCase()}
        </Heading>

        <RichText tag={'p'} className={'textEllipsis mb-4'}>
          {description}
        </RichText>
        <Separator
          height={'1px'}
          color={colors.white}
        ></Separator>
        <Button
          variant={'link'}
          rightIcon={<Icon icon="icon-arrow-forward" />}
        >
          {buttonLabel && buttonLabel}
        </Button>
      </Flex>
      {linkElement}
    </StyledBlogCard >
  )
}

export default BlogCard