SGPT/src/shared/components/home/QnASection.tsx

import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";

import {
  VscArrowDown,
  VscChevronDown,
  VscDebugBreakpointLog,
  VscDiffAdded,
} from "react-icons/vsc";
import "../animated/QnASection.css";
type Props = {};

const QnASection = (props: Props) => {
  const listQnA = [
    {
      id: 1,
      title: "What is Fight Out?",
      bgcolor: "bg-[#CC99FF]",
      contents: [
        {
          id: 1,
          content:
            "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
          bgcolor: "bg-[#9999FF]",
        },
        {
          id: 2,
          content:
            "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
          bgcolor: "bg-[#6699FF]",
        },
        {
          id: 3,
          content:
            "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
          bgcolor: "bg-[#3399FF]",
        },
        {
          id: 4,
          content:
            "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.",
          bgcolor: "bg-[#0099FF]",
        },
      ],
    },
    {
      id: 2,
      title: "Abcd",
      bgcolor: "bg-[#CC66FF]",

      contents: [
        {
          id: 1,
          bgcolor: "bg-[#9966FF]",
          content: "ádasffjk12",
        },
        {
          id: 2,
          bgcolor: "bg-[#6666FF]",
          content: "ádasffj1k",
        },
        {
          id: 3,
          bgcolor: "bg-[#3366FF]",
          content: "ádasffj12k",
        },
        {
          id: 4,
          bgcolor: "bg-[#0066FF]",
          content: "ádasffj123k",
        },
      ],
    },
    {
      id: 3,
      title: "Abcd",
      bgcolor: "bg-[#CC66FF]",

      contents: [
        {
          id: 1,
          bgcolor: "bg-[#9966FF]",
          content: "ádasffjk12",
        },
        {
          id: 2,
          bgcolor: "bg-[#6666FF]",
          content: "ádasffj1k",
        },
        {
          id: 3,
          bgcolor: "bg-[#3366FF]",
          content: "ádasffj12k",
        },
        {
          id: 4,
          bgcolor: "bg-[#0066FF]",
          content: "ádasffj123k",
        },
      ],
    },
    {
      id: 4,
      title: "Abcd",
      bgcolor: "bg-[#CC66FF]",

      contents: [
        {
          id: 1,
          bgcolor: "bg-[#9966FF]",
          content: "ádasffjk12",
        },
        {
          id: 2,
          bgcolor: "bg-[#6666FF]",
          content: "ádasffj1k",
        },
        {
          id: 3,
          bgcolor: "bg-[#3366FF]",
          content: "ádasffj12k",
        },
        {
          id: 4,
          bgcolor: "bg-[#0066FF]",
          content: "ádasffj123k",
        },
      ],
    },
  ];
  const { t } = useTranslation("qna");
  const [qnaData, setQnaData] = useState([]);
  const showListItem = (id: string, iconDropDown: string) => {
    const iconDropDownid = document.getElementById(`${iconDropDown}`);
    // const ulhidden = document.querySelector(`#${id} ul`);
    const ulhidden = document.querySelector(`#${id}>ul`);
    console.log(ulhidden);
    ulhidden?.classList.toggle("listItem__QnA-active");
    // ulhidden?.classList.toggle("showListQnA");
    // ulhidden?.classList.toggle("hiddenListQnA");
    iconDropDownid?.classList.toggle("iconDropUp");
    iconDropDownid?.classList.toggle("iconDropDown");
  };
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setQnaData(t("data", { returnObjects: true }));
    const section = document.querySelector("#qna");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.2 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, [t]);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    from: {
      opacity: 0,
    },
    to: {
      opacity: isVisible ? 1 : 0,
    },
    config: {
      duration: 1000,
    },
  });

  return (
    <div
      className="container animate-[5s_ease]  min-h-[400px] mb-[100px] lg:justify-center lg:flex  mx-auto py-2 text-white "
      id="qna"
    >
      <div className="w-full lg:w-[50%] min-h-[100px]">
        <h1 className="text-4xl font-bold text-center hover:text-orange-400">
          FAQS
        </h1>
        <h2 className="text-center ">
          See some of the most frequently asked questions about Fight
          {/* Out here. Got a question that’s not on the list? Let us know
                    below! */}
        </h2>
      </div>

      <animated.div
        className="w-full lg:w-[50%] mx-auto overflow-hidden "
        style={{
          ...styles,
        }}
      >
        <ul className="flex flex-col items-center gap-4 lg:w-full w-full">
          {qnaData.map((item: any, index: any) => {
            return (
              <li
                id={"title" + item.id}
                key={item.id}
                className="w-full md:w-3/4 lg:w-full items-center flex flex-col pl-3 pr-3 h-full cursor-pointer border border-orange-500 rounded"
                onClick={() =>
                  showListItem("title" + item.id, index + item.title)
                }
              >
                <div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative ">
                  {/* <div
                    className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
                  ></div> */}
                  <span className="sm:text-xl md:text-2xl w-full pl-2 font-semibold borde text-white">
                    {item.title}
                  </span>
                  <div className="listQnA h-6 w-6 flex cursor-pointer ">
                    <VscChevronDown
                      id={index + item.title}
                      className="iconDropDown iconActive hover:text-2xl m-auto text-orange-500"
                    />
                  </div>
                </div>
                <ul className="listItem__QnA flex-col w-full list-answer ">
                  {item.contents.map((list: any, index: any) => {
                    return (
                      <li
                        key={list.id}
                        className=" w-full min-h-10 flex items-center p-3 relative first:border-t first:border-orange-500 "
                      >
                        <span className="text-lg pl-2 font-bold text-white">
                          {list.content}
                        </span>
                      </li>
                    );
                  })}
                </ul>
              </li>
            );
          })}
        </ul>
      </animated.div>
    </div>
  );
};

export default QnASection;