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

const LeftTab = ({ ToggleState, index, title, info, img }) => {
  return (
    <>
      <div className={style.bold}>
        {ToggleState === index ? (
          <img
            className={style.mb}
            src="./assets/book-icon.png"
            alt="Preschool Management Solutions | Streamline Operations with aKadmy"
          />
        ) : null}
        <h4>{title}</h4>
        {ToggleState === index ? <p className={style.normal}>{info}</p> : null}
      </div>
      <div className={style.imgPart1}>
        {ToggleState === index ? (
          <img
            src={img}
            width={"80%"}
            alt="Preschool Management Solutions | Streamline Operations with aKadmy"
          />
        ) : null}
      </div>
      <div
        className={ToggleState === index ? style.tab : style.active_content}
      />
    </>
  );
};

const RigthImg = ({ image }) => {
  return (
    <div style={{ position: "absolute", right: 0 }}>
      <img
        src={image}
        className={style.right_img}
        alt="Preschool Management Solutions | Streamline Operations with aKadmy"
      />
    </div>
  );
};

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

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

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

  return (
    <ContentWrapper>
      <div className={style.container}>
        <div style={{ flex: 1.4 }}>
          <div className={style.title_color}>
            <h2>
              Superior Kindergarten Management Solutions I Effortless Navigation
            </h2>
          </div>
          <br />
          <ul className={style.tab_list}>
            <li className={style.sideCard} onClick={() => toggleTab(1)}>
              <LeftTab
                index={1}
                ToggleState={ToggleState}
                title="Effective Integration of Early Education Programs"
                info="Experience the power of a preschool management solution seamlessly integrating diverse early learning programs."
                img="/assets/Effective_Integration.webp"
              />
            </li>
            <li className={style.sideCard} onClick={() => toggleTab(2)}>
              <LeftTab
                ToggleState={ToggleState}
                index={2}
                title="Adaptive Learning with Preschool Management Software"
                info="Engage young learners with real-time adaptive learning. This interactive tool helps children explore new topics, practice skills, and enjoy a personalized learning experience—all while simplifying preschool management."
                img="/assets/Real-Time-Adaptive-Learning.webp"
              />
            </li>
            <li className={style.sideCard} onClick={() => toggleTab(3)}>
              <LeftTab
                index={3}
                ToggleState={ToggleState}
                title="Buzzboard Brainstorm"
                info="Create a collaborative digital space for your classroom to brainstorm ideas, share images and work together."
                img="/assets/Buzzboard-Brainstorm.webp"
              />
            </li>
            <li className={style.sideCard} onClick={() => toggleTab(4)}>
              <LeftTab
                index={4}
                ToggleState={ToggleState}
                title="i-Worksheet Creation for Teachers"
                info="Create engaging, multimedia-rich worksheets with aKadmy's builder. Personalize learning, add interactive questions, and track student progress with real-time feedback—all within our preschool management software."
                img="/assets/i-Worksheet.webp"
              />
            </li>
          </ul>
        </div>
        <div style={{ flex: 2, marginTop: "80px" }}>
          <div className={style.imgPart2}>
            {ToggleState === 1 ? (
              <RigthImg image={"/assets/Effective_Integration.webp"} />
            ) : ToggleState === 2 ? (
              <RigthImg image={"/assets/Real-Time-Adaptive-Learning.webp"} />
            ) : ToggleState === 3 ? (
              <RigthImg image={"/assets/Buzzboard-Brainstorm.webp"} />
            ) : (
              <RigthImg image={"/assets/i-Worksheet.webp"} />
            )}
          </div>
        </div>
      </div>
    </ContentWrapper>
  );
}