import { Col, Container, Image, Row, Stack } from "react-bootstrap";
import PartnerSlider from "react-slick";

interface Slider{
    img: string
}

const slides: Slider[] = [
    {
        img: "/images/redline.jpg"
    },
    {
        img: "/images/goldencomm.png"
    },
    {
        img: "/images/financial.png"
    },
    {
        img: "/images/shoresummer.png"
    },
    {
        img: "/images/healthwork.png"
    },
    {
        img: "/images/flimp.png"
    },
    {
        img: "/images/slyr_games.webp"
    }
]

const TrustedPartners = () => {

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 5,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        arrows: false,
        centerMode: false,
        margin: 30,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 575,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    };

    return (
        <Stack className="trusted-companies margin-bottom-70">
            <Container>
                <Row className="align-items-center">
                    <Col md="12">
                        <h2 className="text-center">Trusted By</h2>
                    </Col>
                    <Col md="12">
                        <PartnerSlider {...settings}>
                            {slides.map((items, index) => (
                                <div className="partners-logo">
                                    <Image className="client-logo" src={items.img} />
                                </div>
                            ))}
                        </PartnerSlider>
                    </Col>
                </Row>
            </Container>
        </Stack>
    )
}

export default TrustedPartners;