import React from 'react'

import Point from './Point';


const RichTextPoints = ({children, className, wrapperClass, points, count = 3, textsize }) => {
    return (
        <div className={['flex max-md:flex-col justify-between items-center', wrapperClass].join(' ')}>
            <div className={['basis-1/2 max-md:mb-8', className].join(' ')}>{children}</div>
            <div style={{'--pointsBasis': count * 220 + 'px'}} className="flex justify-center basis-[var(--pointsBasis)] max-md:basis-full flex-wrap max-md:-mr-4">
                {points.map(point=>
                    <Point key={point.id} ico={point.ico} link={point.link} to={point.to} title={point.title} textsize={textsize}/>
                )}          
            </div>
        </div>
    )
}

export default RichTextPoints;