import { Fragment } from "react"
import { LogOut } from "react-feather"

import { serverClient } from "@/lib/trpc/server"

import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/Title"

import styles from "./sidebar.module.css"

export default async function Sidebar() {
  const navigation = await serverClient().contentstack.myPages.navigation.get()

  return (
    <aside className={styles.sidebar}>
      <nav className={styles.nav}>
        <Title level="h5" uppercase>
          {navigation.title}
        </Title>
        {navigation.items.map((item) => (
          <Fragment key={item.uid}>
            <Link
              href={item.originalUrl || item.url}
              partialMatch
              variant="sidebar"
            >
              {item.linkText}
            </Link>
            {item.subItems
              ? item.subItems.map((subItem) => (
                  <Link
                    key={subItem.uid}
                    href={subItem.originalUrl || subItem.url}
                    partialMatch
                    variant="sidebar"
                  >
                    {subItem.linkText}
                  </Link>
                ))
              : null}
          </Fragment>
        ))}

        <Link href="/api/web/auth/signout" variant="sidebar">
          Log out <LogOut height={16} width={16} />
        </Link>
      </nav>
    </aside>
  )
}