import { getPublicFaqs } from "@/lib/api/cms";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function FaqPage() {
  const { data: faqs } = await getPublicFaqs();

  return (
    <div className="mx-auto max-w-3xl px-6 py-10">
      <h1 className="text-2xl font-semibold">Frequently Asked Questions</h1>

      {faqs.length === 0 ? (
        <p className="mt-6 text-sm text-kolabora-neutral-dark/70">No FAQs yet.</p>
      ) : (
        <div className={cn("mt-6 flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
          {faqs.map((faq) => (
            <div key={faq.id} className="px-4 py-4">
              <p className="font-medium">{faq.question}</p>
              <p className="mt-2 text-sm text-kolabora-neutral-dark/70">{faq.answer}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}