"use client";

import Container from "@/components/elements/Container";
import ThemeSwitcher from "@/components/elements/ThemeSwitcher";
import Logout from "@/components/settings/settings/Logout";
import PageTitle from "@/components/settings/PageTitle";
import Roules from "@/components/settings/settings/Roules";
import Suggestions from "@/components/settings/settings/Suggestions";
import UserDetails from "@/components/settings/UserDetails";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import { staticIconUrl } from "@/components/main/BaseUrl";
import Image from "next/image";
import Link from "next/link";
import { useTranslation } from "react-i18next";

const SETTINGS_NAV = [
  { key: "wallet", href: "/wallet", icon: "card.svg" },
  { key: "shop", href: "/shop", icon: "shop-add.svg" },
  { key: "billboards", href: "/my-billboards", icon: "flash-circle.svg" },
  { key: "academy", href: "/academy/Dashboard", icon: "academy.svg" },
  { key: "workroom", href: "/workroom", icon: "box.svg" },
  { key: "booking", href: "/booking", icon: "calendar.svg" },
  { key: "offers", href: "/offers", icon: "offer.svg" },
  { key: "favorites", href: "/favorites", icon: "bookmark-post.svg" },
  { key: "chats", href: "/chats", icon: "sms.svg" },
  { key: "notifications", href: "/notifications", icon: "notification.svg" },
  { key: "financial", href: "/financial", icon: "wallet.svg" },
  { key: "edit", href: "/edit", icon: "edit.svg" },
  { key: "support", href: "/tickets", icon: "lifebuoy.svg" },
] as const;

export default function SettingsClient() {
  const { t } = useTranslation("common");

  return (
    <LocalePageShell>
      <Container>
      <PageTitle>{t("settings.title")}</PageTitle>
      <div>
        <UserDetails />
        <div className="my-10 flex flex-col gap-5 text-sm font-semibold md:gap-8">
          <ThemeSwitcher />
          {SETTINGS_NAV.map((item) => (
            <Link
              className="flex items-center gap-2"
              key={item.key}
              href={`/settings${item.href}`}
            >
              <Image
                width={24}
                height={24}
                alt=""
                src={staticIconUrl(`/images/icons/${item.icon}`)}
                className="dark:brightness-0 dark:invert"
              />
              <span>{t(`settings.nav.${item.key}`)}</span>
            </Link>
          ))}
          <Suggestions />
          <Roules />
          <Link href="/about-us" className="flex items-center gap-2">
            <Image
              width={24}
              height={24}
              alt=""
              src="/images/icons/contact.svg"
              className="dark:brightness-0 dark:invert"
            />
            <span>{t("common.aboutUs")}</span>
          </Link>
          <Logout />
        </div>
      </div>
    </Container>
    </LocalePageShell>
  );
}
