import { Col, Container, Image, Row, Stack } from "react-bootstrap";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

interface teamtype {
    id: number,
    image: string,
    username: string,
    designation: string
}

const teamlist: teamtype[] =  [
    {
        id: 1,
        image: "/images/team-1.png",
        username: "Robert B. Zellmer",
        designation: "App Designer"
    },
    {
        id: 2,
        image: "/images/team-2.png",
        username: "Micheal R. Shannon",
        designation: "Web Developer"
    },
    {
        id: 3,
        image: "/images/team-3.png",
        username: "Robert B. Zellmer",
        designation: "Magento Developer"
    },
    {
        id: 4,
        image: "/images/team-1.png",
        username: "Robert B. Zellmer",
        designation: "App Designer"
    },
    {
        id: 5,
        image: "/images/team-2.png",
        username: "Micheal R. Shannon",
        designation: "Web Developer"
    },
    {
        id: 6,
        image: "/images/team-3.png",
        username: "Robert B. Zellmer",
        designation: "Magento Developer"
    }
]

const OurTeam = () => {

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 30000,
        arrows: false,
        centerMode: true,
        centerPadding: '108px',
        responsive: [
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 2,
                    centerPadding: '70px'
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2,
                    centerPadding: '50px'
                }
            },
            {
                breakpoint: 575,
                settings: {
                    slidesToShow: 1,
                    centerPadding: '30px'
                }
            }
        ]
    };

    return (
        <Container className="our-team">
            <Row>
                <Col md="12">
                    <h5 className="section-title m-0 text-center">Our <span>Team</span></h5>
                    <p className="section-subtitle text-center">We’ve Exclusive Team member Meet our Professionals</p>
                </Col>
            </Row>
            <Slider {...settings}>
                {teamlist.map((items) => (
                    <Stack key={items.id} className="our-team-list">
                        <Image src={items.image} />
                        <label>{items.username}</label>
                        <span>{items.designation}</span>
                    </Stack>
                ))}
            </Slider>
        </Container>
    )
}

export default OurTeam;