import Flex from '@/components/atoms/Flex'
import Heading from '../../atoms/Heading/Heading.component'
import { IStoreCard } from './StoreCard.interface'
import React from 'react'
import RichText from '@/components/atoms/RichText/RichText.component'
import { StyledStoreCard } from './StoreCard.theme'
import { colors } from '@/styles/variables'
import Spacer from '@/components/atoms/Spacer/Spacer.component'

const StoreCard = ({
  title,
  imageElements,
  description,
}: IStoreCard) => {
  return (
    <StyledStoreCard>
      <Flex gap={'12px'} align={'center'}>
        <Heading
          tag={'h6'}
          size={"h6"}
          className={"fw-bold"}
          style={{ color: colors.gray50 }}
        >
          {title}
        </Heading>
        {imageElements && (
          <Flex gap={'8px'} align={'center'}>
            {imageElements.map((image, key) => <div key={`flag-${key}`}>{image}</div>)}
          </Flex>
        )}
      </Flex>
      <RichText tag={'p'}>
        {description}
      </RichText>
    </StyledStoreCard>
  )
}

export default StoreCard