"use client";

import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import Link from "next/link";
import { useTranslation } from "react-i18next";
import BoldIcon from "@/components/ui/BoldIcon";

const ACTIVITY_ITEMS = [
  { key: "likes", href: "/settings/edit/activity/likes" },
  { key: "comments", href: "/settings/edit/activity/comments" },
  { key: "academyLikes", href: "/settings/edit/activity/academy-likes" },
  { key: "academyComments", href: "/settings/edit/activity/academy-comments" },
  { key: "billboardLikes", href: "/settings/edit/activity/billboard-likes" },
  { key: "billboardComments", href: "/settings/edit/activity/billboard-comments" },
];

function ActivityHubPage() {
  const { t } = useTranslation("common");

  return (
    <LocalePageShell>
      <Container>
        <PageTitle>{t("settings.edit.nav.activity")}</PageTitle>
        <div className="my-6 flex flex-col gap-5 text-sm font-semibold md:gap-8">
          {ACTIVITY_ITEMS.map((item) => (
            <Link
              key={item.key}
              href={item.href}
              className="flex items-center justify-between gap-2"
            >
              <span>{t(`settings.activity.items.${item.key}`)}</span>
              <BoldIcon
                name="arrow-right-2"
                size={18}
                tinted
                className="text-neutral-400 rtl:rotate-180"
              />
            </Link>
          ))}
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default ActivityHubPage;
