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

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

  return (
    <ContentWrapper>
      <div className={style.section5}>
        <p className={style.section5__content__line1}>Explore interaKto</p>
        <h2 className={style.section5__content__line2}>InteraKto Extentions</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="An Illustration"
                />
              </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>
    </ContentWrapper>
  );
}

export default InteraktoExtentions;
