import Spacer from '@/components/atoms/Spacer'
import { StyledClampLine, StyledFinishesCard } from './FinishesCard.theme'
import { colors } from '@/styles/variables'
import { IFinishesCard } from './FinishesCard.interface'
import Button from '@/components/atoms/Button'
import Flex from '@/components/atoms/Flex'
import Heading from '@/components/atoms/Heading'
import Separator from '@/components/atoms/Separator'
import React, { useState } from 'react'
import ImageWrapper from '@/components/atoms/ImageWrapper'
import RichText from '@/components/atoms/RichText'

const FinishesCard = ({
  imageElement,
  title,
  description,
  showMoreLabel,
  showLessLabel,
}: IFinishesCard) => {


  return (
    <StyledFinishesCard>
      <div className="image-element">
        <ImageWrapper aspectRatioHeight={100}>{imageElement}</ImageWrapper>
      </div>
      <Flex
        justify="space-between"
        align="center"
        className={'w-100 news-info'}
        style={{ color: colors.gray50 }}
        gap='8px'
      >
      </Flex>


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


      <RichText>
        {description}
      </RichText>


      <div className="separator-bottom">
        <Separator
          height={'1px'}
          color={colors.white}
          margin='top'
        // style={{ marginTop: 'auto' }}
        ></Separator>
      </div>
    </StyledFinishesCard >
  )
}

export default FinishesCard