import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";

import Link from "next/link";
import { MDBContainer } from "mdb-react-ui-kit";
import { imgslides } from "../../src/redux/static";



const slides= [
  {
    id: 1,
    title: " شرکت گازهای طبی ره پویان توسعه تهران",
    img: imgslides.a,
  },
  {
    id: 2,
    title: " شرکت پیاوار",
    img: imgslides.b,
  },
  {
    id: 3,
    title: "شرکت  کارپذیر",
    img: imgslides.c,
  },
  {
    id: 4,
    title: "  شرکت فنی مهندسی کهربا تراشه",
    img: imgslides.d,
  },
  {
    id: 5,
    title: " شرکت پویندگان راه سعادت",
    img: imgslides.e,
  },
  {
    id: 6,
    title: "  صنایع چوبی دکو مهر",
    img: imgslides.f,
  },
  {
    id: 7,
    title: "شرکت لوازم اداری سهند",
    img: imgslides.g,
  },
  {
    id: 8,
    title: "   شرکت طب و صنعت یاسین",
    img: imgslides.h
  },
  {
    id: 9,
    title: "  شرکت مون گارشو",
    img: imgslides.i,
  },
  {
    id: 10,
    title: "  شرکت  پویان تهویه",
    img: imgslides.j,
  },
  {
    id: 11,
    title: " کاربین برج",
    img: imgslides.k,
  },
];


const brands = () => {
  return (
    <MDBContainer  className={"mt-5"}>
      <div className="flex justify-center">
        <h3 className="bk-med font-bold">سهامداران پروژه</h3>
      </div>
      <div className="">
        <Swiper
          // slidesPerGroup={3}
          // loopFillGroupWithBlank={true}
          slidesPerView={"auto"}
          // spaceBetween={50}
          className="mySwiper"
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log("slide change")}
          loop={true}
          autoplay={{
            delay: 2000,
            autoplayDisableOnInteraction: false,
          }}
          breakpoints={{
            1200: {
              slidesPerView: 4,
              spaceBetween: 50,
            },
            1024: {
              slidesPerView: 3,
              spaceBetween: 30,
            },
            768: {
              slidesPerView: 3,
              spaceBetween: 20,
            },
            640: {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            320: {
              slidesPerView: 1,
              spaceBetween: 30,
            },
          }}
        >
        {slides.map((slide) => {
          return (
            <SwiperSlide className="slidesBrands" key={slide.id}>
              <Link href="#">
                <div className="card-content">
                  <div className="image w-full">
                    <img
                     src={slide.img}
                      className="lg:w-[70%] md:w-[65%]  m-auto slidimg	"
                      alt=""
                    />
                  </div>
                  <div className="detail flex text-center	mt-[1.5rem]  ">
                    <p className="compony font-bold text-[0.8rem] text-[#1e1e2d] ">
                      {slide.title}
                    </p>
                  </div>
                </div>
              </Link>
            </SwiperSlide>
          );
        })}
   

        </Swiper>
      </div>
    </MDBContainer>
  );
};

export default brands;