import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import Heading from "@/components/reuseables/Heading";
import { Col, Container, Row } from "react-bootstrap";
import { cleanImage } from "@/layout/imageHandling";
const team = [
  {
    id: 1,
    image: "/images/people/shradha.webp",
    altText: "Shradha Patil ",
    name: "Shradha Patil",
    designation: "Group Senior Manager",
    socialLinks: [
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/in/shradha-patil-250a57127/",
      },
    ],
  },
  {
    id: 2,
    image: "/images/people/nikita.webp",
    altText: "Nikita Mittal",
    name: "Nikita Mittal",
    designation: "Manager, Corporate Law Services",
    socialLinks: [
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/in/csnikitamittal?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
      },
    ],
  },
  {
    id: 3,
    image: "/images/people/sharanya_sundar.webp",
    altText: "Sharanya Sundar ",
    name: "Sharanya Sundar ",
    designation: "Manager, Advisory Services",
    socialLinks: [
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/in/sharanya-sundar-a8b14480/",
      },
    ],
  },
  {
    id: 4,
    image: "/images/people/ekta.webp",
    altText: "Ekta Kukreja ",
    name: "Ekta Kukreja ",
    designation: "Assistant Manager, CFO Services",
    socialLinks: [
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/in/ekta-kukreja-605a41193?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
      },
    ],
  },

  {
    id: 5,
    image: "/images/people/priyank.webp",
    altText: "Priyank Parekh ",
    name: "Priyank Parekh ",
    designation: "Assistant Manager, CFO Services",
    socialLinks: [
      {
        id: 3,
        icon: "ri-linkedin-fill",
        url: "https://www.linkedin.com/in/ca-priyank-parekh-b00365232?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app",
      },
    ],
  },
];

const TeamMember = ({ memberlist }) => {
  return (
    <>
      <div className="team-area pt-50 pb-70 bg-fafafa">
        <Container>
          <div className="section-title">
            {/* <span className="sub-title">Team Member</span> */}
            <Heading el="h2" heading="Our Exclusive Team" />
          </div>

          <Row className="justify-content-center">
            {memberlist &&
              memberlist.map((member) => (
                <Col md={3} lg={3} sm={6} xs={12}>
                  <div className="single-team-member">
                    <Image
                      fill
                      src={cleanImage(member?.Image?.url)}
                      alt={member.altText}
                      className="img-fluid image"
                    />
                    <div className="content">
                      <h3>{member.Name}</h3>
                      <span>{member.Designation}</span>
                      <ul className="social-links">

                        <li>
                          <a
                            href={member.Linkdin}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <i className="ri-linkedin-fill"></i>
                          </a>
                        </li>

                      </ul>
                    </div>
                  </div>
                </Col>
              ))}
          </Row>
        </Container>
      </div>
    </>
  );
};
{
  /* <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="partner-slides"
            >
              {team &&
                team.map((member) => (
                  <SwiperSlide key={member.id}>
                    <div className="single-team-member">
                      <Image
                        layout="fill"
                        src={member.image}
                        alt={member.altText}
                        className="img-fluid image"
                      />
                      <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>
                  </SwiperSlide>
                ))}
            </Swiper> */
}
export default TeamMember;