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

const AccordionItem = (props) => {
  const contentEl = useRef();
  const { handleToggle, active, faq, textColor } = props;
  const { question, id, answer } = faq;

  return (
    <div className={style.rc_accordion_card} style={{ color: textColor }}>
      <div className={style.rc_accordion_header}>
        <div
          className={style.rc_accordion_toggle}
          onClick={() => handleToggle(id)}
        >
          <div>
            {active === id ? (
              <i
                className="fa fa-chevron-up"
                style={{ paddingRight: "10px" }}
              />
            ) : (
              <i
                className="fa fa-chevron-right"
                style={{ paddingRight: "10px" }}
              />
            )}
          </div>
          <div style={{ marginTop: "-20px" }}>
            <h5 className={style.header}>{question}</h5>
          </div>
        </div>
      </div>
      <div
        ref={contentEl}
        style={active === id ? { height: "auto" } : { height: "0px" }}
      >
        <div
          className={style.rc_accordion_body}
          style={{ color: props.color3 }}
        >
          <p>
            {answer.map((item) => (
              <div>
                {item}
                <br />
              </div>
            ))}
          </p>
        </div>
      </div>
    </div>
  );
};

export default function FAQ({ color1, color2, color3, data, prefix }) {
  const [active, setActive] = useState(1);

  const handleToggle = (index) => {
    if (active === index) {
      setActive(null);
    } else {
      setActive(index);
    }
  };

  return (
    <ContentWrapper>
      <div style={{ marginBottom: "60px" }}>
        <p
          style={{ color: color1, marginBottom: "10px", letterSpacing: "1px" }}
        >
          {prefix ? prefix : "Explore Yourself"}
        </p>
        <h2 style={{ color: color1, marginBottom: "10px" }}>
          Frequently Asked <i style={{ color: color2 }}>Questions</i>
        </h2>
        {data.map((faq, index) => {
          return (
            <AccordionItem
              textColor={color1}
              key={index}
              active={active}
              handleToggle={handleToggle}
              faq={faq}
              color3={color3}
            />
          );
        })}
      </div>
    </ContentWrapper>
  );
}
