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

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

export default function Sidebar({ menuItems }: SidebarProps) {
  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        {/* <Link className={`${styles.link} ${styles.active}`} href="#">
          My Scandic
        </Link> */}
        {/* Base styles.active on menuItem href and current path */}
        {menuItems.map((item) => (
          <>
            <Link key={item.uid} className={styles.link} href="#">
              {item.linkText || item.title}
            </Link>
            {item.subItems
              ? item.subItems.map((subItem) => {
                  return (
                    <Link key={subItem.uid} className={styles.link} href="#">
                      {subItem.linkText || subItem.title}
                    </Link>
                  )
                })
              : null}
          </>
        ))}

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