import { useTranslations } from "next-intl";
import Link from "next/link";
import { ContentCard } from "@/components/public/ui";

export const dynamic = "force-dynamic";

export const metadata = { title: "Community" };

const LINKS = [
  {
    key: "rankings",
    href: "/rankings",
    icon: "🏆",
  },
  {
    key: "staff",
    href: "/staff",
    icon: "🛡️",
  },
  {
    key: "news",
    href: "/news",
    icon: "📰",
  },
  {
    key: "photos",
    href: "/photos",
    icon: "📸",
  },
  {
    key: "guilds",
    href: "/guilds",
    icon: "🚪",
  },
  {
    key: "leaderboards",
    href: "/leaderboard",
    icon: "📊",
  },
];

export default function CommunityPage() {
  const t = useTranslations("pages.community");

  return (
    <main style={{ display: "grid", gap: "1.5rem" }}>
      <ContentCard
        icon="🌍"
        title={t("title")}
        subtitle={t("subtitle")}
      />

      <div className="card-grid sm-2 lg-3">
        {LINKS.map((l) => (
          <Link
            key={l.href}
            href={l.href}
            className="content-card hover-lift"
            style={{ color: "inherit", textDecoration: "none" }}
          >
            <div className="content-card-head">
              <span className="content-card-icon" aria-hidden>
                {l.icon}
              </span>
              <div className="content-card-head-text">
                <p className="content-card-title">{t(`links.${l.key}.title`)}</p>
              </div>
            </div>
            <div className="content-card-body">
              <p className="muted" style={{ margin: "0 0 0.75rem" }}>
                {t(`links.${l.key}.text`)}
              </p>
              <span className="btn btn-outline">{t("open")}</span>
            </div>
          </Link>
        ))}
      </div>
    </main>
  );
}