import Image, {StaticImageData} from "next/image";
import styles from './FboFbsItem.module.css';

export type FboFbsItemProps = {
    imgSrc: StaticImageData,
    headingBulletPoint: string,
    bulletPoints: string[]
};

export function FboFbsItem(props: FboFbsItemProps) {
    const {imgSrc, headingBulletPoint, bulletPoints} = props;

    return (
        <div className={styles.root}>
            <Image className={styles.image} src={imgSrc} alt={''} placeholder={'blur'} sizes={'100vw'}/>
            <div></div>
            <ul className={styles.list}>
                <li className={styles.headingItem}>{headingBulletPoint}</li>
                {bulletPoints.map((bulletPoint, i) => <li key={i}>{bulletPoint}</li>)}
            </ul>
        </div>
    );
};