import FAQContent from "./components/faq-content";
import { FAQCategory } from "@/lib/types/models";
import commonService from "@/lib/services/common";

export default async function Page() {
  const data: FAQCategory[] = await commonService.fetchFaqList();

  if (!data.length) {
    return null;
  }

  return (
    <div className="bg-[linear-gradient(180deg,_rgba(250,242,255,1)_5.5%,_rgba(255,255,255,1)_96.99%)]">
      <div className="main-container mobile-container">
        <div className="max-w-7xl mx-auto">
          <div className="px-0 lg:px-8 py-8 text-center">
            <h1 className="text-neutral-black-87 text-left lg:text-center text-[24px] lg:text-[34px] font-semibold pb-4">
              Frequently Asked Questions
            </h1>
            <p className="text-neutral-black-87 text-left lg:text-center">
              Select any topic from the menu below. Click on a question to open
              and/or close the answer.
            </p>
          </div>

          <FAQContent data={data} />
        </div>
      </div>
    </div>
  );
}