import React from "react";

import styles from "@/app//(Admin)/dashboard/(Posts Zone)/categories/[slug]/category.add.module.css";

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

import { getAllCategories, getCategoryById } from "@/models/term";
import { BsArrowLeft } from "react-icons/bs";
import CategoryEditor from "@/components/administrator/CategoryEditor/category.editor";
import { modifyByKeys } from "@/models/helper";

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

    const category = await getCategoryById(id);
    const categories = await getAllCategories();

    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <Link
            className={styles.back}
            href="/dashboard/categories">
            <BsArrowLeft /> back
          </Link>
        </div>
        <div className={styles.body}>
          <CategoryEditor
            data={modifyByKeys(category, ["parents"], (parents) =>
              parents.map((parent) => parent._id)
            )}
            categories={categories}
          />
        </div>
      </div>
    );
  } catch (error) {
    return notFound();
  }
};

export default CategoryItem;
