import { useState } from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import style from "./LearningDevCarousel.module.css";

const data = [
  {
    img: "/assets/prime.webp",
    description:
      "Focus on physical, communication, and personal, social, and emotional development, forming the foundation for all future learning.",
    title: "Prime",
    index: 0,
  },
  {
    img: "/assets/specific.webp",
    description:
      "Developing literacy, mathematics, understanding the world, and expressive arts, building essential academic and creative skills.",
    title: "Specific",
    index: 1,
  },
  {
    img: "/assets/augmented.webp",
    description:
      "Enhancing learning through specialized programs like Super Phonics, Writo, Minimax Abacus, and Bonjour French.",
    title: "Augmented",
    index: 2,
  },
  {
    img: "/assets/prime.webp",
    description:
      "Focus on physical, communication, and personal, social, and emotional development, forming the foundation for all future learning.",
    title: "Prime",
    index: 3,
  },
];

const Card = ({ height, width, mt, title, description, image }) => {
  return (
    <div
      style={{
        height: height,
        maxWidth: width,
        marginTop: mt,
      }}
      className={style.card}
    >
      <div style={{ textAlign: "center", overflow: "hidden" }}>
        <img
          src={image}
          width={height === "140px" ? "50%" : "90%"}
          alt="Digital Preschool Curriculum | aKadmy - AI-Powered Early Learning"
        />
      </div>
      <div className={style.card_content}>
        {description ? <h5>{title}</h5> : <h6>{title}</h6>}
        <p>{description}</p>
      </div>
    </div>
  );
};

const CustomButtonGroupAsArrows = ({ next, previous, ...rest }) => {
  return (
    <div className={style.button_main}>
      <button onClick={previous} className={style.button}>
        <i
          class="fa fa-chevron-left"
          style={{ fontSize: "14px", color: "#e0ffdf" }}
        />
      </button>
      <button onClick={next} className={style.button}>
        <i
          class="fa fa-chevron-right"
          style={{ fontSize: "14px", color: "#e0ffdf" }}
        />
      </button>
    </div>
  );
};

export default function LearningDevCarousel() {
  const [number, setNumber] = useState(0);
  const corrosalFunc = (nextSlide, _ref2) => {
    var currentSlide = _ref2.currentSlide;
    _ref2.onMove;
    setNumber(currentSlide);
  };
  return (
    <div className={style.container_main}>
      <Carousel
        arrows={false}
        afterChange={corrosalFunc}
        additionalTransfrom={0}
        autoPlaySpeed={3000}
        centerMode={false}
        minimumTouchDrag={80}
        partialVisible
        responsive={{
          desktop: {
            breakpoint: {
              max: 3000,
              min: 1024,
            },
            items: 2,
            partialVisibilityGutter: 100,
          },
          mobile: {
            breakpoint: {
              max: 464,
              min: 0,
            },
            items: 1,
            partialVisibilityGutter: 0,
          },
          tablet: {
            breakpoint: {
              max: 1024,
              min: 464,
            },
            items: 1,
            partialVisibilityGutter: 160,
          },
        }}
        rtl={false}
        slidesToSlide={1}
        swipeable
        renderButtonGroupOutside
        customButtonGroup={<CustomButtonGroupAsArrows />}
      >
        {data.map((item) => (
          <div>
            {number === item.index ? (
              <Card
                height={"300px"}
                width={"480px"}
                title={item.title}
                description={item.description}
                image={item.img}
              />
            ) : number === item.index - 1 ? (
              <Card
                height={"200px"}
                width={"380px"}
                mt={"9%"}
                title={item.title}
                image={item.img}
              />
            ) : (
              <Card
                height={"140px"}
                width={"470px"}
                mt={"14%"}
                title={item.title}
                image={item.img}
              />
            )}
          </div>
        ))}
        {/* <div></div> */}
      </Carousel>
    </div>
  );
}
