"use client";

import { useState } from "react";

type FAQ = {
  question: string;
  answer: string;
};

function PlusRotateIcon({ isOpen }: { isOpen: boolean }) {
  return (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className={`transition-transform duration-300 ${ isOpen ? "rotate-0" : "rotate-45"}`}>
    <circle cx="12" cy="12" r="12" fill="#202020"/>
    <path d="M7.67969 16.3197L16.3197 7.67969Z" fill="#202020"/>
    <path d="M7.67969 16.3197L16.3197 7.67969" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    <path d="M16.3197 16.3197L7.67969 7.67969Z" fill="#202020"/>
    <path d="M16.3197 16.3197L7.67969 7.67969" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
  );
}



export default function FAQSection({ faqs }: { faqs: FAQ[] }) {
  const [openIndex, setOpenIndex] = useState(0);

  return (
      <div className="mt-6">

        {/* Header */}
        <div className="mb-6">
          <h2 className="text-2xl font-medium text-[#202020] font-mono">
            Frequently Asked Questions
          </h2>
        </div>

        {/* FAQ List */}
        <div className="space-y-4">
          {faqs.map((faq, index) => {
            const isOpen = openIndex === index;

            return (
              <div
                key={index}
                className={`
                  rounded-lg overflow-hidden transition-all border border-[#202020]/15 hover:bg-white duration-300
                  ${isOpen
                    ? "bg-white"
                    : "bg-transparent"
                  }
                `}
              >
                <button
                  onClick={() => setOpenIndex(isOpen ? -1 : index)}
                  className="w-full flex items-center justify-between px-4 sm:px-6 py-4 sm:py-5 text-left cursor-pointer"
                >
                  <span className="font-mono font-medium text-lg sm:text-[22px] text-[#202020] pr-3">
                    {faq.question}
                  </span>

                  <span className="w-6 h-6 flex items-center justify-center rounded-full bg-[#202020]">
                    <PlusRotateIcon isOpen={isOpen} />
                  </span>
                </button>

                {isOpen && (
                  <div
                    className="px-4 sm:px-6 pb-6 text-base sm:text-lg text-[#202020]/70 leading-relaxed"
                    dangerouslySetInnerHTML={{ __html: faq.answer }}
                  />
                )}
              </div>
            );
          })}
        </div>

      </div>
  );
}