import Heading from '@/components/atoms/Heading/Heading.component';
import { IIconBox } from './IconBox.interface';
import React from 'react';
import RichText from '@/components/atoms/RichText/RichText.component';
import { StyledIconBox } from './IconBox.theme';

const IconBox = ({
  label,
  icon,
  description,
  className,
  ...props
}: IIconBox) => {
  return (
    <StyledIconBox className={className} {...props}>
      {icon}
      <div>
        <Heading size="texts" tag="span" style={{ fontWeight: 700 }}>
          {label}
        </Heading>
        <RichText tag='p'>{description}</RichText>
      </div>
    </StyledIconBox>
  )
}

export default IconBox