"use client";

import { useState } from "react";
import { faqs } from "@/data/pages";
import styles from "@/app/contact/contact.module.css";

export default function ContactFaq() {
  const [open, setOpen] = useState(0);

  return (
    <div className={styles.faqList}>
      {faqs.map((item, index) => {
        const active = open === index;
        return (
          <div className={styles.faqItem} key={`${item.question}-${index}`}>
            <button
              type="button"
              className={styles.faqTrigger}
              aria-expanded={active}
              onClick={() => setOpen(active ? -1 : index)}
            >
              <span>{item.question}</span>
              <img
                className={active ? styles.faqOpen : styles.faqClosed}
                src="/images/icons/chevron.svg"
                alt=""
                width={10}
                height={18}
              />
            </button>
            {active ? <p className={styles.faqAnswer}>{item.answer}</p> : null}
          </div>
        );
      })}
    </div>
  );
}