import styles from "./course-faq.module.scss"
import { useState } from "react"
import { FaAngleDown, FaAngleUp } from "react-icons/fa"

interface CourseFaqProps {
  question: string
  answer: string
}

const CourseFaq = ({ question, answer }: CourseFaqProps) => {
  const [active, setActive] = useState(false)

  const toggleActive = () => {
    setActive((prev) => !prev)
  }

  return (
    <div
      onClick={toggleActive}
      className={`${styles["course__faq"]} ${active ? styles["active"] : ""}`}
    >
      <div className={styles["course__faq--content"]}>
        <h1>{question}</h1>
        {active && <p>{answer}</p>}
      </div>
      <span className={styles["course__faq--icon"]}>
        {active ? <FaAngleUp /> : <FaAngleDown />}
      </span>
    </div>
  )
}

export default CourseFaq