"use client";

import React, { useState } from "react";

export interface FaqItem {
  question: string;
  answer: string;
}

interface PricingFaqSectionProps {
  leftFaqs: FaqItem[];
  rightFaqs: FaqItem[];
}

export function PricingFaqSection({ leftFaqs, rightFaqs }: PricingFaqSectionProps) {
  const [openKey, setOpenKey] = useState<string | null>(null);

  const toggle = (key: string) => {
    setOpenKey((prev) => (prev === key ? null : key));
  };

  return (
    <section className="faq">
      <div className="container">
        <div className="head">
          Frequently Asked Questions
          <p>An Answer for All Your Queries!</p>
        </div>
        <div className="flex">
          <ul className="all-faq">
            {leftFaqs.map((faq, idx) => {
              const key = `left-${idx}`;
              const isOpen = openKey === key;
              return (
                <li key={idx}>
                  <span
                    className={`faqtop ${isOpen ? "current" : ""}`}
                    onClick={() => toggle(key)}
                  >
                    {faq.question}
                  </span>
                  <article
                    className={`faq-box ${isOpen ? "open" : ""}`}
                    style={{ display: isOpen ? "block" : "none" }}
                  >
                    {faq.answer}
                  </article>
                </li>
              );
            })}
          </ul>

          <ul className="all-faq">
            {rightFaqs.map((faq, idx) => {
              const key = `right-${idx}`;
              const isOpen = openKey === key;
              return (
                <li key={idx}>
                  <span
                    className={`faqtop ${isOpen ? "current" : ""}`}
                    onClick={() => toggle(key)}
                  >
                    {faq.question}
                  </span>
                  <article
                    className={`faq-box ${isOpen ? "open" : ""}`}
                    style={{ display: isOpen ? "block" : "none" }}
                  >
                    {faq.answer}
                  </article>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}