mediahub-fe/app/[locale]/(public)/faqs/page.tsx

"use client";
import { Reveal } from "@/components/landing-page/Reveal";
import React, { useState } from "react";
import { useTranslations } from "next-intl";
import Image from "next/image";

interface FAQItem {
  question: string;
  answer: string;
}

const FAQS: React.FC = () => {
  const t = useTranslations("LandingPage");

  const faqs: FAQItem[] = [
    {
      question: t("question1", { defaultValue: "Question1" }),
      answer: t("answer1", { defaultValue: "Answer1" }),
    },
    {
      question: t("question2", { defaultValue: "Question2" }),
      answer: t("answer2", { defaultValue: "Answer2" }),
    },
    {
      question: t("question3", { defaultValue: "Question3" }),
      answer: t("answer3", { defaultValue: "Answer3" }),
    },
    {
      question: t("question4", { defaultValue: "Question4" }),
      answer: t("answer4", { defaultValue: "Answer4" }),
    },
  ];

  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleFAQ = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div className="max-w-3xl mx-auto h-screen p-6 mt-20">
      {/* Header */}
      <Reveal>
        <div className="flex items-center justify-center mb-6">
          <Image
            width={1920}
            height={1080}
            src="/assets/icons-faqs.png"
            alt="Faqs"
            className="h-12 w-12"
          />
          <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800 dark:text-white">
            Frequently Asked Questions
          </h2>
        </div>

        {/* FAQS Items */}
        <div className="space-y-4">
          {faqs?.map((faq, index) => (
            <div
              key={index}
              className="border-b border-gray-300 pb-2 cursor-pointer"
            >
              <div
                className="flex justify-between items-center"
                onClick={() => toggleFAQ(index)}
              >
                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">
                  {faq.question}
                </h3>
                <span className="text-gray-500 dark:text-white text-xl">
                  {openIndex === index ? "−" : "+"}
                </span>
              </div>
              {openIndex === index && (
                <p className="text-gray-600 dark:text-white mt-2 text-sm">
                  {faq.answer}
                </p>
              )}
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
};

export default FAQS;