"use client";

import Container from "@/components/elements/Container";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import { editUserNavLinks } from "@/constants";
import { useUser } from "@/hooks/useUser";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";

function EditPage() {
  const user = useUser();
  const [isRegister, setIsRegister] = useState<string | undefined>("false");

  useEffect(() => {
    setIsRegister(user?.is_Register);
  }, [user]);

  return (
    <Container>
      <PageTitle>ویرایش</PageTitle>
      <div className="px-4">
        <UserDetails />
        <div className="my-10 flex flex-col gap-5 text-sm font-semibold md:gap-8">
          {editUserNavLinks?.map((item) => (
            <Link
              className={`flex items-center gap-2 ${
                item?.title === "مجوز" && isRegister === "false" ? "hidden" : ""
              }`}
              key={item?.title}
              href={`/settings/edit${item?.href}`}
            >
              <Image
                width={24}
                height={24}
                alt={item?.title}
                src={`/images/icons/${item?.icon}`}
                className="dark:invert"
              />
              <span>{item?.title}</span>
            </Link>
          ))}
        </div>
      </div>
    </Container>
  );
}

export default EditPage;
