import React, { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
import { classNamesTailwind } from '../../utils/theme';
import Container from '../Container';
import ImageText, { ImageTextProps } from '../ImageText';

export interface ImageTextsProps {
    imageTexts: ImageTextProps[];
    defaultImageTextProps?: Partial<ImageTextProps>;
    className?: string;
    odd?: boolean;
}

const ImageTexts = ({ imageTexts, defaultImageTextProps, className, odd }: ImageTextsProps) => {
    return (
        <Container className={classNamesTailwind('space-y-16 md:space-y-24', className)}>
            {imageTexts.map((imageText, index) => {
                const imageTextOdd = index % 2 === 0;
                // const last = index === imageTexts.length - 1;

                return (
                    <ImageText
                        {...defaultImageTextProps}
                        {...imageText}
                        heading={{ ...defaultImageTextProps.heading, ...imageText.heading }}
                        odd={odd ? imageTextOdd : !imageTextOdd}
                    />
                );
            })}
        </Container>
    );
};

export default ImageTexts;
