"use client";
import { useState } from "react";
import dynamic from "next/dynamic";

const SafeHtmlRenderer = dynamic(
  () => import("../../components/SafeHtmlRenderer"),
  { ssr: false }
);

export default function Faq({ title, data }: any) {
  const [openItem, setOpenItem] = useState<number>(1);

  return (
    <>
      <h1 className="text-center  mb-8 ">{title}</h1>
      <div className="md:w-[80%] mb-12 m-auto p-4 sm:p-8 rounded-lg">
        <div className="mx-auto">
          <div className="space-y-2">
            {data &&
              data?.map((item: any, i: any) => (
                <div
                  key={i}
                  className="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-200"
                >
                  <button
                    onClick={() =>
                      setOpenItem(openItem === item._id ? 0 : item._id)
                    }
                    className="w-full px-6 py-4 text-left flex justify-between items-center hover:bg-gray-50"
                  >
                    <span className="text-xl">
                      {i + 1}. {item?.postTitle}
                    </span>
                    <span className="ml-6 flex-shrink-0">
                      {openItem === item._id ? (
                        <svg
                          className="h-6 w-6 text-gray-500"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M6 18L18 6M6 6l12 12"
                          />
                        </svg>
                      ) : (
                        <svg
                          className="h-6 w-6 text-gray-500"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 6v6m0 0v6m0-6h6m-6 0H6"
                          />
                        </svg>
                      )}
                    </span>
                  </button>

                  <div
                    className={`px-6 overflow-hidden transition-all duration-200 ease-in-out ${
                      openItem === item._id ? "max-h-[1000px] pb-6" : "max-h-0"
                    }`}
                  >
                    <SafeHtmlRenderer htmlContent={item?.shortContent} />
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </>
  );
}