import {Box, Avatar} from '@mui/material';
import Carousel from "react-material-ui-carousel";
import {sponsors} from "../../data/constants";

const SponsorsCarousel = () => {
    // Дублируем логотипы для бесшовной прокрутки
    const items = [...sponsors];

    return (
        <Box sx={{mb: 4, overflow: 'hidden'}}>
            <Carousel
                autoPlay
                interval={3000}          // смена каждые 3 сек
                animation="slide"          // плавный слайд
                duration={800}          // длительность анимации (мс)
                stopOnHover={true}      // не останавливать при наведении
                indicators={false}
                cycleNavigation         // зациклить
                infiniteLoop            // бесконечная прокрутка
                swipe           // отключить свайп (если не нужен)
                sx={{
                    '& .MuiBox-root': {p: 0, display: 'flex', alignItems: 'center'},
                }}
            >
                {/* Генерируем слайды: каждый слайд — строка из 3–4 логотипов */}
                {Array.from({length: Math.ceil(items.length / 3)}).map((_, slideIdx) => (
                    <Box key={slideIdx} sx={{display: 'flex', justifyContent: 'space-around', px: 2}}>
                        {items.slice(slideIdx * 3, slideIdx * 3 + 3).map((sponsor, idx) => (
                            <Avatar
                                key={idx}
                                src={sponsor.logo}
                                alt={sponsor.name}
                                sx={{
                                    width: 300,
                                    height: 150,
                                    borderRadius: '6px',
                                    mx: 2,
                                }}
                            />
                        ))}
                    </Box>
                ))}
            </Carousel>
        </Box>
    );
};

export default SponsorsCarousel;
