"use client";

import Footer from "@comp/Footer/page";
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
import Navbar from "@comp/Navbar/page";
import { useEffect, useState } from "react";

const FaqData = () => {
  const [faq, setFaq] = useState([]);
  const [faqSelect, setFaqSelect] = useState(0);

  const fetchNavData = async (id) => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/comments`);
    const post = await res.json();
    setFaq(post);
  };

  useEffect(() => {
    fetchNavData();
  }, []);
  return (
    <>
      <div className="bg-contact-us ">
        <div className=" pb-20">
          <NavbarTransparent />

          <div className="my-[80px] ">
            <div className="px-5">
              <h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
                پرسش‌های متداول
              </h1>
            </div>
          </div>
        </div>
      </div>

      <div className=" xs:px-3 lg:px-20 rtl lg:m-10 xs:m-3 pb-20 ">
        {faq?.map((e, index) => (
          <div
            className={` p-5 w-full rounded-lg my-2 tr03 cursor-pointer ${
              faqSelect == index ? "bg-gray-100" : "bg-primary-100"
            }`}
            onClick={() => setFaqSelect(index)}
            key={index}
          >
            <div className="flex">
              <span className="mx-2 text-xl text-gray-900">
                {faqSelect == index ? "-" : "+"}
              </span>
              <h2 className="mb-0 text-gray-700 text-sm text-right mt-1 font-semibold">
                {e.name}
              </h2>
            </div>
            {faqSelect == index && (
              <>
                <div className="h-[1px] bg-gray-300 w-[120px] mr-5 m-5 "></div>
                <p className="mb-0 text-right text-gray-500 text-sm">
                  {e.body}
                </p>
              </>
            )}
          </div>
        ))}
      </div>

      <Footer />
    </>
  );
};

export default FaqData;