import Footer from "@/components/layout/Footer";
import { Header } from "@/components/layout/Header";
import TopicsHero from "@/features/topics/components/TopicsHero";
import TopicsAnchors from "@/features/topics/components/TopicsAnchors";
import FeaturedTopicsSection from "@/features/topics/components/FeaturedTopicsSection";
import TrendingSection from "@/features/topics/components/TrendingSection";
import ContentTypesSection from "@/features/topics/components/ContentTypesSection";
import MostFollowedSection from "@/features/topics/components/MostFollowedSection";
import AZDirectorySection from "@/features/topics/components/AZDirectorySection";
import TagCloudSection from "@/features/topics/components/TagCloudSection";

import { getServerLocale } from "@/lib/i18n/server";

export default async function TopicsPage() {
  const locale = await getServerLocale();
  return (
    <div className="dt-fade-in">
      <Header locale={locale} activePage="topics" />
      <TopicsHero />
      <TopicsAnchors />
      <main style={{ background: "var(--bg)" }}>
        <FeaturedTopicsSection />
        <TrendingSection />
        <ContentTypesSection />
        <MostFollowedSection />
        <AZDirectorySection />
        <TagCloudSection />
      </main>
      <Footer locale={locale} />
    </div>
  );
}