"use client"
import { LogOut } from "react-feather"
import Link from "../../TempDesignSystem/Link"

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

export default function Sidebar({ menuItems }: SidebarProps) {
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        {menuItems.map((item) => (
          <Fragment key={item.uid}>
            <Link variant={"sidebar"} href={item.url}>
              {item.linkText}
            </Link>
            {item.subItems
              ? item.subItems.map((subItem) => {
                  return (
                    <Link
                      key={subItem.uid}
                      href={subItem.url}
                      variant={"sidebar"}
                    >
                      {subItem.linkText}
                    </Link>
                  )
                })
              : null}
          </Fragment>
        ))}

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