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

const data = [
  {
    img: "/assets/Family.webp",
    title: "Family",
    discription:
      "Family teaches us the core values of love, empathy and mutual support. These early lessons in family relationships help toddlers form meaningful bonds that go beyond home, promoting a sense of community and belonging.",
  },
  {
    img: "/assets/babies_child.webp",
    title: "Babies and Children",
    discription:
      "Our Mother Toddler Program curriculum empowers mothers with essential knowledge of early childhood development through hands-on activities like baby care and role-playing. By focusing on key developmental milestones and inviting personal experiences, mothers gain meaningful insights to guide and support their child’s development.",
  },
  {
    img: "/assets/food.webp",
    title: "Food",
    discription:
      "Food education in our Mother Toddler Program age-focussed sessions is fun. Toddlers explore food through colorful visuals, sorting games and taste tests. Parents are encouraged to support learning at home by participating in food-related activities.",
  },
  {
    img: "/assets/home.webp",
    title: "Home",
    discription:
      "Let the toddlers explore their home by learning about different rooms through role-plays and visuals. Parents can join in with activities like drawing favorite rooms or giving home tours, making the experience fun and relatable.",
  },
  {
    img: "/assets/outside.webp",
    title: "Outside",
    discription:
      "Through our Mother Toddler Program, toddlers explore the outdoors by identifying plants, animals and weather. Simple visuals, short nature walks and games like ‘I Spy’ keep the experience engaging. Parents can enhance their learning by participating in outdoor activities like gardening or picnics, helping toddlers connect their learning to the world around them.",
  },
  {
    img: "/assets/animal.webp",
    title: "Animal",
    discription:
      "Introduce toddlers to animals using pictures, sounds and mimicry to help them recognise different species. Use matching games to make learning enjoyable, and involve parents with zoo visits or animal-themed books for a more interactive experience.",
  },
  {
    img: "/assets/Friends.webp",
    title: "Friends",
    discription:
      "Our Mother toddler Program age-appropriate curriculum teaches toddlers about friendship through interactive stories, sharing games, and role-playing. We promote playdates and use books to teach kindness and cooperation, helping toddlers form meaningful connections.",
  },
];

export default function GroupSection() {
  const [value, setValue] = useState(0);
  return (
    <>
      <div className={style.section}>
        <div className={style.section_1}>
          {data.map((item, index) =>
            index === value ? (
              <img
                src={item.img}
                width={"100%"}
                className={style.left_image}
                alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
              />
            ) : null
          )}
        </div>
        <div className={style.section_2}>
          {data.map((item, index) => (
            <div className={style.right_section}>
              <div
                className={style.right_section_title}
                style={{
                  fontSize: index === value ? "24px" : "1.2rem",
                  opacity: index === value ? 1 : 0.5,
                }}
              >
                {item.title}
              </div>
              {index === value ? (
                <p className={style.right_description}>{item.discription}</p>
              ) : null}
            </div>
          ))}
        </div>
        <div className={style.right_button}>
          <div onClick={() => setValue(value === 0 ? 7 - 1 : value - 1)}>
            <img
              src="/assets/black_up.png"
              width={50}
              alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
            />
          </div>
          <div onClick={() => setValue(value === 6 ? 0 : value + 1)}>
            <img
              src="/assets/black_down.png"
              width={50}
              alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
            />
          </div>
        </div>
      </div>
      <div className={style.section_two}>
        <Carousel
          additionalTransfrom={0}
          arrows={false}
          autoPlaySpeed={3000}
          centerMode={false}
          dotListClass=""
          draggable
          focusOnSelect={false}
          infinite
          keyBoardControl
          pauseOnHover
          renderArrowsWhenDisabled={false}
          renderButtonGroupOutside={false}
          renderDotsOutside={false}
          responsive={{
            mobile: {
              breakpoint: {
                max: 464,
                min: 0,
              },
              items: 1,
            },
            tablet: {
              breakpoint: {
                max: 1024,
                min: 464,
              },
              items: 1,
            },
          }}
          rewind={false}
          rewindWithAnimation={false}
          shouldResetAutoplay
          showDots
          sliderClass=""
          slidesToSlide={1}
          swipeable
        >
          {data.map((item, index) => (
            <div style={{ textAlign: "center", marginBottom: "20px" }}>
              <img
                src={item.img}
                width={"100%"}
                alt="Mother-Toddler Program | aKadmy - Engaging Early Childhood Learning"
              />
              <div style={{ fontSize: "24px", opacity: 1 }}>{item.title}</div>
              <p className={style.right_description}>{item.discription}</p>
            </div>
          ))}
        </Carousel>
      </div>
    </>
  );
}
