import Image from "next/image";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";

const team = [
  {
    id: 1,
    image: "/images/team/team1.jpg",
    altText: "James Andy",
    name: "James Andy",
    designation: "CEO & Founder",
    socialLinks: [
      {
        id: 1,
        icon: "ri-facebook-fill",
        url: "https://www.facebook.com/",
      },
      {
        id: 2,
        icon: "ri-twitter-fill",
        url: "https://twitter.com/",
      },
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/",
      },
      {
        id: 4,
        icon: "ri-instagram-line",
        url: "https://www.instagram.com/",
      },
    ],
  },
  {
    id: 2,
    image: "/images/team/team2.jpg",
    altText: "Sarah Taylor",
    name: "Sarah Taylor",
    designation: "Office Manager",
    socialLinks: [
      {
        id: 1,
        icon: "ri-facebook-fill",
        url: "https://www.facebook.com/",
      },
      {
        id: 2,
        icon: "ri-twitter-fill",
        url: "https://twitter.com/",
      },
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/",
      },
      {
        id: 4,
        icon: "ri-instagram-line",
        url: "https://www.instagram.com/",
      },
    ],
  },
  {
    id: 3,
    image: "/images/team/team3.jpg",
    altText: "Steven Smith",
    name: "Steven Smith",
    designation: "General Manager",
    socialLinks: [
      {
        id: 1,
        icon: "ri-facebook-fill",
        url: "https://www.facebook.com/",
      },
      {
        id: 2,
        icon: "ri-twitter-fill",
        url: "https://twitter.com/",
      },
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/",
      },
      {
        id: 4,
        icon: "ri-instagram-line",
        url: "https://www.instagram.com/",
      },
    ],
  },
  {
    id: 4,
    image: "/images/team/team4.jpg",
    altText: "Alina Lucy",
    name: "Alina Lucy",
    designation: "PR and Consulting",
    socialLinks: [
      {
        id: 1,
        icon: "ri-facebook-fill",
        url: "https://www.facebook.com/",
      },
      {
        id: 2,
        icon: "ri-twitter-fill",
        url: "https://twitter.com/",
      },
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/",
      },
      {
        id: 4,
        icon: "ri-instagram-line",
        url: "https://www.instagram.com/",
      },
    ],
  },
];

const TeamMember = () => {
  return (
    <>
      <div className="team-area pt-100 pb-70 bg-fafafa">
        <div className="container">
          <div className="section-title">
            <span className="sub-title">Team Members</span>
            <h2>Meet Members of Our Exclusive Team for Your Business</h2>
          </div>

          <div className="row justify-content-center">
            <Swiper
              spaceBetween={30}
              breakpoints={{
                0: {
                  slidesPerView: 2,
                },
                576: {
                  slidesPerView: 3,
                },
                768: {
                  slidesPerView: 4,
                },
                992: {
                  slidesPerView: 4,
                },
              }}
              autoplay={{
                delay: 3000,
                disableOnInteraction: true,
                pauseOnMouseEnter: true,
              }}
              modules={[Autoplay]}
              className="teammemebr-slider"
            >
              {team &&
                team.map((member) => (
                  <SwiperSlide key={member.id}>
                    <div
                      className="col-lg-3 col-md-6 col-sm-6 col-xs-6"
                      key={member.id}
                    >
                      <div className="single-team-member">
                        <Image src={member.image} alt={member.altText} />
                        <div className="content">
                          <h3>{member.name}</h3>
                          <span>{member.designation}</span>
                          <ul className="social-links">
                            {member.socialLinks.map((link) => (
                              <li key={link.id}>
                                <a
                                  href={link.url}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                >
                                  <i className={link.icon}></i>
                                </a>
                              </li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}
            </Swiper>
          </div>
        </div>
      </div>
    </>
  );
};

export default TeamMember;