import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import FAQAccordion, { FAQItem } from "../faq/faqAccardion";
import { useLocale, useTranslations } from "next-intl";

export function ServiceFaq() {
  const t = useTranslations();
  const locale = useLocale();
  const faqItems: FAQItem[] = [
    {
      id: 1,
      question: t("faq.question1.question"),
      answer: t("faq.question1.answer"),
    },
    {
      id: 2,
      question: t("faq.question2.question"),
      answer: t("faq.question2.answer"),
    },
    {
      id: 3,
      question: t("faq.question3.question"),
      answer: t("faq.question3.answer"),
    },
    {
      id: 4,
      question: t("faq.question4.question"),
      answer: t("faq.question4.answer"),
    },
    {
      id: 5,
      question: t("faq.question5.question"),
      answer: t("faq.question5.answer"),
    },
  ];
  return (
    <div className="bg-[#1e1d1c] py-20 pb-50 space-y-8">
      {/* header */}
      <div className="space-y-4 w-full ">
        <div className="flex items-center gap-3 justify-center text-white text-xl">
          <DotAnimatsiya /> {locale === "ru" ? "ФАК" : "FAQ"}
        </div>
        <h1
          className="text-center bg-linear-to-br from-white via-white/50 to-black
  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
        >
          {t("faq.banner.topic")}
        </h1>
      </div>

      {/* FAQ Section */}
      <div className="md:col-span-2 max-w-6xl mx-auto w-full px-2">
        <FAQAccordion items={faqItems} />
      </div>
    </div>
  );
}