import React from "react";

import Link from "next/link";
import { notFound } from "next/navigation";

import styles from "@/app/(Admin)/dashboard/(Users)/users/[slug]/user.add.module.css";

import UserEditor from "@/components/administrator/UserEditor/user.editor";
import { getUserById } from "@/services/users";

import { BsArrowLeft } from "react-icons/bs";

const UserItem = async ({ params }) => {
  try {
    const query = await params;
    const id = query.slug;

    const user = await getUserById(id);

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <Link
            className={styles.back}
            href="/dashboard/users">
            <BsArrowLeft /> back
          </Link>
        </div>
        <div className={styles.body}>
          <UserEditor data={user} />
        </div>
      </div>
    );
  } catch (error) {
    console.log({ error });
    return notFound();
  }
};

export default UserItem;
