import React from "react";
import style from "./VerticalAutoCarousel.module.css";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import { useState } from "react";
import { useEffect } from "react";

const LeftTab = ({ ToggleState, index }) => {
  return (
    <div
      className={style.switcher}
      style={{ background: ToggleState === index ? "#0348A8" : "white" }}
    />
  );
};

const RigthImg = ({ image, title, points }) => {
  return (
    <div className={style.right_section}>
      <div className={`${style.right_section_width} ${style.center}`}>
        <img
          src={image}
          className={style.right_section_width_img}
          alt="Preschool Management Solutions | Streamline Operations with aKadmy"
        />
      </div>
      <div className={style.right_section_width} style={{ margin: "auto 0px" }}>
        <h2 style={{ color: "#1A286F" }}>{title}</h2>
        {points.map((item) => (
          <div style={{ display: "flex", marginTop: "8px" }}>
            <div style={{ margin: "auto 0px", marginRight: "10px" }}>
              <img src="/assets/checkMark.png" />
            </div>
            <div>{item}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default function VerticalAutoCarousel() {
  const [ToggleState, setToggleState] = useState(1);
  const toggleTab = (index) => {
    setToggleState(index);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      if (ToggleState > 5) {
        setToggleState(1);
      } else {
        setToggleState(ToggleState + 1);
      }
    }, 8000);

    return () => clearInterval(interval);
  }, [ToggleState]);

  const array = ["", "", "", "", "", ""];

  return (
    <ContentWrapper>
      <div className={style.container}>
        <div>
          <ul className={style.tab_list}>
            {array.map((item, index) => (
              <li onClick={() => toggleTab(index + 1)}>
                <LeftTab ToggleState={ToggleState} index={index + 1} />
              </li>
            ))}
          </ul>
        </div>
        <div>
          {ToggleState === 1 ? (
            <RigthImg
              image={"/assets/Attendence.gif"}
              title={"Facial Recognition for Attendance"}
              points={[
                "Automate daily attendance using AI-powered Facial Recognition.",
                "Captures and records attendance in real time",
                "Reduces manual errors, ensuring accurate attendance tracking.",
                "Works smoothly with other aKadmy kindergarten management solution tools",
              ]}
            />
          ) : ToggleState === 2 ? (
            <RigthImg
              image={"/assets/Observation.gif"}
              title={"Observations"}
              points={[
                "Record detailed observations of each child, focusing on key developmental areas.",
                "Align observations with global standards like EYFS, COEL, EYLF, and PYP.",
                "Monitor progress against age-appropriate milestones to ensure balanced growth.",
                "Identify patterns in behavior and classroom participation.",
                "Create smart and personalised action plans for each child using aKademy kindergarten management solution.",
              ]}
            />
          ) : ToggleState === 3 ? (
            <RigthImg
              image={"/assets/Report_Generation.gif"}
              title={"Report Generation"}
              points={[
                "Generate detailed reports on each child's progress using our early learning management solution.",
                "Create customized cover letters for each student with automated assessment criteria.",
                "Tailor reports to focus on key developmental areas and milestones.",
                "Draft personalized feedback with options for teachers to review and edit.",
              ]}
            />
          ) : ToggleState === 4 ? (
            <RigthImg
              image={"/assets/Conversational_Buddies.gif"}
              title={"Conversational Buddies"}
              points={[
                "Make learning enjoyable and enriching with personalized experiences.",
                "Adapt lesson content and pace to suit each child’s learning progress and style.",
                "Support individual learning needs for well-rounded development using aKadmy’s preschool management solution.",
              ]}
            />
          ) : ToggleState === 5 ? (
            <RigthImg
              image={"/assets/Captivating_Worksheets.gif"}
              title={"Captivating i-Worksheets"}
              points={[
                "Design engaging worksheets effortlessly with just a prompt.",
                "Add unique themes, sounds, and visuals to make worksheets vibrant and interactive.",
                "aKadmy’s innovative preschool management solution curates content tailored to the subject and learning level.",
                "Keep children entertained and engaged while fostering meaningful learning experiences.",
                "Craft smart, customized action plans to match each child’s unique learning journey.",
              ]}
            />
          ) : (
            <RigthImg
              image={"/assets/Curriculum.gif"}
              title={"Smart Curriculum Planning"}
              points={[
                "Analyze learning patterns to suggest resources tailored to individual needs.",
                "Leverage AI to create personalized learning paths for each child.",
                "Ensure every child receives a customized educational experience based on their progress.",
                "aKadmy’s advanced kindergarten management solutions make curriculum planning smarter and more effective.",
              ]}
            />
          )}
        </div>
      </div>
    </ContentWrapper>
  );
}
