"use client";

import { useEffect, useState } from "react";
import { TopBar } from "@/components/ui/TopBar";
import { GlassCard } from "@/components/ui/GlassCard";
import { Accordion } from "@/components/ui/Accordion";
import { Skeleton } from "@/components/ui/Skeleton";
import { ContactOptions } from "@/components/ContactOptions";
import { fetchCmsPage, FaqContent } from "@/lib/data/cms";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export default function HelpPage() {
  const { t, language } = useTranslation();
  const [content, setContent] = useState<FaqContent | null>(null);

  useEffect(() => {
    let active = true;
    setContent(null);
    fetchCmsPage<FaqContent>("faq", language).then(
      (result) => active && setContent(result)
    );
    return () => {
      active = false;
    };
  }, [language]);

  return (
    <div className="flex flex-1 flex-col">
      <TopBar title={t("help.title")} />

      <div className="flex flex-1 flex-col gap-6 px-4 pb-8 pt-2">
        <section>
          <p className="mb-3 text-sm font-medium text-muted">{t("help.talkToUs")}</p>
          <ContactOptions />
        </section>

        <section>
          <p className="mb-3 text-sm font-medium text-muted">{t("help.faq")}</p>
          {content ? (
            <GlassCard className="!p-1">
              <Accordion items={content.items} />
            </GlassCard>
          ) : (
            <div className="flex flex-col gap-2">
              <Skeleton className="h-12 w-full !rounded-2xl" />
              <Skeleton className="h-12 w-full !rounded-2xl" />
              <Skeleton className="h-12 w-full !rounded-2xl" />
            </div>
          )}
        </section>
      </div>
    </div>
  );
}