"use client";

import { useState } from "react";
import { ChevronDown } from "lucide-react";

interface Props {
  faqs: {
    question: string;
    answer: string;
  }[];
}

export default function BlogFaq({
  faqs,
}: Props) {
  const [open, setOpen] = useState<number | null>(0);

  if (!faqs?.length) return null;

  return (
    <section className="mt-20">
      <h2 className="font-serif text-3xl text-espresso mb-8">
        Frequently Asked Questions
      </h2>

      <div className="space-y-4">
        {faqs.map((faq, index) => (
          <div
            key={index}
            className="rounded-xl border border-espresso/10 bg-white"
          >
            <button
              onClick={() =>
                setOpen(open === index ? null : index)
              }
              className="flex w-full items-center justify-between p-5 text-left"
            >
              <span className="font-semibold text-espresso">
                {faq.question}
              </span>

              <ChevronDown
                className={`transition ${
                  open === index ? "rotate-180" : ""
                }`}
              />
            </button>

            {open === index && (
              <div className="px-5 pb-5 text-espresso/70 leading-7">
                {faq.answer}
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}