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 UserDetails from "@/components/settings/UserDetails";
import { navLinks } from "@/constants";
import { staticIconUrl } from "@/components/main/BaseUrl";
import Image from "next/image";
import Link from "next/link";
import React from "react";

function Settings() {
  return (
    <Container>
      <PageTitle>تنظیمات</PageTitle>
      <div className="px-4">
        <UserDetails />
        <div className="flex flex-col gap-5 md:gap-8 my-10 text-sm font-semibold">
          <ThemeSwitcher />
          {navLinks?.map((item) => {
            return (
              <Link
                className="flex items-center gap-2"
                key={item?.title}
                href={`/settings${item?.href}`}
              >
                <Image
                  width={24}
                  height={24}
                  alt={item?.title}
                  src={staticIconUrl(`/images/icons/${item?.icon}`)}
                  className="dark:invert"
                />
                <span>{item?.title}</span>
              </Link>
            );
          })}
          <Roules />
          <Link href={"/about-us"} className="flex items-center gap-2">
            <Image
              width={24}
              height={24}
              alt={""}
              src={`/images/icons/contact.svg`}
              className="dark:invert"
            />
            <span>درباره ما</span>
          </Link>
          <Logout />
        </div>
      </div>
    </Container>
  );
}

export default Settings;
