import { Accordion } from "@/components/ui/accordion";
import FaqItem from "./FaqItem";
import { useTranslations } from "next-intl";

export interface FaqData {
  id: number;
  question: string;
  answer: string;
}

interface FaqsListProps {
  faqsData?: FaqData[];
}

export default function FaqsList({ faqsData }: FaqsListProps) {
  const t = useTranslations("HomePage.faqs.questions");

  const defaultFaqsData: FaqData[] = [
    {
      id: 1,
      question: t("0.question"),
      answer: t("0.answer"),
    },
    {
      id: 2,
      question: t("1.question"),
      answer: t("1.answer"),
    },
    {
      id: 3,
      question: t("2.question"),
      answer: t("2.answer"),
    },
    {
      id: 4,
      question: t("3.question"),
      answer: t("3.answer"),
    },
  ];

  const dataToUse =
    faqsData && faqsData.length > 0 ? faqsData : defaultFaqsData;
  return (
    <div className="flex justify-center items-center">
      <Accordion
        type="single"
        collapsible
        className="gap-4 flex flex-col mx-0 justify-center py-0 w-full"
      >
        {dataToUse.map((faq) => (
          <FaqItem
            key={faq.id}
            value={faq.id.toString()}
            question={faq.question}
            answer={faq.answer}
          />
        ))}
      </Accordion>
    </div>
  );
}