"use client";
/*
    This component is for the FAQ item.
*/
import { useEffect, useRef, useState } from "react";
import styles from "./FaqsItem.module.scss";

const FaqItem = ({
  question,
  answer,
  isActive,
  onClick,
}: {
  question: string;
  answer: string;
  isActive: boolean;
  onClick: () => void;
}) => {
  // Content Ref
  const contentRef = useRef<HTMLDivElement>(null);
  // Height State
  const [height, setHeight] = useState("0px");
  // Opacity State
  const [opacity, setOpacity] = useState(0);

  // Effect for the height and opacity of the FAQ item
  useEffect(() => {
    if (isActive && contentRef.current) {
      setHeight(`${contentRef.current.scrollHeight}px`);
      setOpacity(1);
    } else {
      setHeight("0px");
      setOpacity(0);
    }
  }, [isActive]);

  return (
    <div
      className={`${styles.FaqsItem} ${isActive ? styles.FaqActive : ""
        } bg-bgColor rounded-[16px] sm:rounded-[20px] lg:rounded-[26px]`}
    >
      {/* Faq Header */}
      <div
        className={`${styles.FaqsItemHeader} flex items-center justify-between gap-4 bg-bgColor p-4 md:p-5 lg:p-6 rounded-[16px] sm:rounded-[20px] lg:rounded-[26px]`}
        onClick={onClick}
      >
        <h6 className={`${styles.FaqHeading} !mb-0 text-black`}>{question}</h6>
        <span className={styles.FaqHeaderIcon}>
          <i className="Icon"></i>
        </span>
      </div>

      {/* Faq Body */}
      <div
        ref={contentRef}
        className={`${styles.FaqsItemBody}`}
        style={{
          maxHeight: height,
          opacity: opacity,
          transition: "max-height 0.4s ease-in-out, opacity 0.4s ease-in-out",
          overflow: "hidden",
        }}
      >
        <div className="py-4 px-4 sm:px-5 md:px-6">
          <p className="text-black">
            {answer}
          </p>
        </div>
      </div>
    </div>
  );
};

export default FaqItem;