import React, { useState } from "react";
import ContentWrapper from "../../components/ContentWrapper/ContentWrapper";
import style from "./GuideLineSection.module.css";

function GuideLineSection({ data }) {
  const [openGuidelinesBox, setOpenGuidelinesBox] = useState(0);

  return (
    <>
      <section className={style.section5}>
        <ContentWrapper>
          <div className={style.section5__container}>
            <div className={style.section5__content}>
              <p className={style.section5__content__line1}>Explore Yourself</p>
              <h2 className={style.section5__content__line2}>
                Guidelines for Teenybeans
              </h2>
              <div className={style.section5__card_container}>
                {data.map((item, index) => (
                  <div
                    className={`${style.section5__card} ${
                      index === openGuidelinesBox &&
                      style.section5__card_expanded
                    }`}
                    onClick={() => setOpenGuidelinesBox(index)}
                  >
                    <div className={style.section5__card_img_container}>
                      <img
                        className={style.section5__card_img}
                        src={item.imgSrc}
                        alt="Digital Preschool Curriculum | aKadmy - AI-Powered Early Learning"
                      />
                    </div>

                    <div className={style.section5__card_text}>
                      <p className={style.section5__card_title}>
                        {item.title}{" "}
                      </p>
                      <p className={style.section5__card_description}>
                        {item.description}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </ContentWrapper>
      </section>
    </>
  );
}

export default GuideLineSection;
