"use client"
import { useMemo } from "react"
import { NotificationIcon, UserFillIcon } from "../icons"
import { getCookiesDecrypt } from "@/utils/globals"

export default function Navbar(props: { title: string }) {
  const { title } = props

  const username: string | null = useMemo(() => {
    return getCookiesDecrypt("username")
  }, [])

  return (
    <div className="flex flex-col gap-1">
      <div className="flex flex-row items-center justify-end gap-2">
        <a>
          <NotificationIcon />
        </a>
        <UserFillIcon size={36} />
        <p>{username}</p>
      </div>
      <p className="text-2xl font-bold">{title}</p>
    </div>
  )
}