"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 border border-violet-300 p-4">
      <div className="flex flex-row items-center justify-between gap-2">
        <p className="text-sm text-gray-500">{title}</p>

        <a>
          <NotificationIcon size={16} />
        </a>
        {/* <UserFillIcon size={36} />
        <p>{username}</p> */}
      </div>
    </div>
  )
}
