"use client"

import React, { useState } from "react"
import styles from "./page-faqs.module.scss"
import { FiChevronDown } from "react-icons/fi"
import { motion } from "framer-motion"

type Faq = {
  id: number | string
  question: string
  answer: string
}

interface FaqsProps {
  faqs: Faq[]
}

const LandingPageFaqs: React.FC<FaqsProps> = ({ faqs }) => {
  // auto-open first FAQ
  const [openIndex, setOpenIndex] = useState<number | null>(
    faqs?.length ? 0 : null
  )

  const toggle = (index: number) => {
    setOpenIndex(prev => (prev === index ? null : index))
  }

  if (!faqs || faqs.length === 0) return null

  return (
    <section className={styles.faqs}>
      <div className={styles.container}>
        {/* Header */}
        <motion.div
          className={styles.header}
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
        >
          <h2>
            Frequently Asked <span>Questions</span>
          </h2>
          <p>
            Clear answers to the most common questions about our platform,
            security, and investments.
          </p>
        </motion.div>

        {/* FAQ List */}
        <div className={styles.list}>
          {faqs.map((faq, index) => {
            const isOpen = openIndex === index

            return (
              <div
                key={faq.id}
                className={`${styles.item} ${isOpen ? styles.open : ""}`}
              >
                <button
                  className={styles.question}
                  onClick={() => toggle(index)}
                  aria-expanded={isOpen}
                >
                  <span>{faq.question}</span>

                  <div className={styles.icon}>
                    <FiChevronDown />
                  </div>
                </button>

                {/* Answer */}
                <div className={styles.answerWrapper}>
                  <div className={styles.answer}>
                    <p>{faq.answer}</p>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}

export default LandingPageFaqs