"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { Navbar } from "@/components/public/Navbar";
import { Footer } from "@/components/public/Footer";
import { CommunityLinksSection } from "@/components/public/CommunityLinksSection";

export default function CommunityPage() {
  const [settings, setSettings] = useState<Record<string, string>>({});

  useEffect(() => {
    api.getPublicSettings()
      .then((data) => setSettings(data))
      .catch(() => {});
  }, []);

  return (
    <>
      <Navbar />
      <div className="min-h-screen">
        <div className="max-w-3xl mx-auto px-8 pt-16 pb-4">
          <h1 className="text-4xl font-black mb-4">Community</h1>
          <p className="text-on-surface-variant text-lg">
            Connect with Belgian Bitcoiners across every platform.
          </p>
        </div>
        <CommunityLinksSection settings={settings} />
      </div>
      <Footer />
    </>
  );
}