import { Swiper, SwiperSlide } from 'swiper/react';
import styles from './styles.module.scss';
import { Autoplay } from 'swiper/modules';

const WMarqueeVertical = ({ messages, renderChild }) => {
    return (
        <Swiper
            direction="vertical"
            autoplay={{ delay: 1500 }}
            loop
            modules={[Autoplay]}
            className={`${styles.container}`}>
            {messages.map((item, i) => (
                <SwiperSlide key={i}>
                    {
                        renderChild ? renderChild(item, i) :
                            <div>
                                {item.messages}
                                {
                                    item.money && <span className={`${styles.money}`}>{` $${item.money}`}</span>
                                }
                            </div>
                    }

                </SwiperSlide>
            ))}
        </Swiper>
    )
}

export default WMarqueeVertical;
