"use client"
import { LogOut } from "react-feather"
import Link from "next/link"

import styles from "./sidebar.module.css"
import { SidebarProps } from "@/types/requests/myPages/navigation"
import { usePathname } from "next/navigation"
import { Fragment } from "react"

export default function Sidebar({ menuItems }: SidebarProps) {
  const currentPageSlug = `/${usePathname()
    .split("/")
    .filter((v) => v)
    .at(-1)}`

  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        {menuItems.map((item) => (
          <Fragment key={item.uid}>
            <Link
              className={`${styles.link} ${currentPageSlug === item.url ? styles.active : ""}`}
              href={item.url}
            >
              {item.linkText || item.title}
            </Link>
            {item.subItems
              ? item.subItems.map((subItem) => {
                  return (
                    <Link
                      key={subItem.uid}
                      className={`${styles.link} ${currentPageSlug === subItem.url ? styles.active : ""}`}
                      href={subItem.url}
                    >
                      {subItem.linkText || subItem.title}
                    </Link>
                  )
                })
              : null}
          </Fragment>
        ))}

        <Link className={styles.link} href="/api/auth/signout">
          Log out <LogOut height={16} width={16} />
        </Link>
      </nav>
    </aside>
  )
}