/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'

import React from 'react'
import styles from './single-faq.module.scss'
import { BsFillPlusCircleFill } from 'react-icons/bs'
import { AiFillMinusCircle } from 'react-icons/ai'
import { useState, useEffect } from 'react'

const SingleFaq = ({ faq }: any) => {
  const { question, answer, id } = faq

  const [showDetails, setShowDetails] = useState(false)

  const handleClick = () => {
    setShowDetails(!showDetails)
  }

  useEffect(() => {
    if (id === 1) {
      setShowDetails(true)
    }
  }, [id])

  return (
    <div onClick={handleClick} className={styles['single__faq']}>
      <div className={styles['single__faq__content']}>
        <div className={styles['single__faq__content__header']}>
          <h3>{question}</h3>
          <div className={styles['single__faq__menu']}>
            {showDetails ? (
              <AiFillMinusCircle
                size="1.8rem"
                fill="#1769fd"
                cursor="pointer"
                onClick={handleClick}
              />
            ) : (
              <BsFillPlusCircleFill
                fill="#1769fd"
                size="1.8rem"
                cursor="pointer"
                onClick={handleClick}
              />
            )}
          </div>
        </div>
        {showDetails ? <p>{answer}</p> : null}
      </div>
    </div>
  )
}

export default SingleFaq