import { PropsWithChildren, ReactNode } from 'react'
import { Role, useUserStore } from '../app/user/user.ts'
import NavButton from './buttons/NavButton.tsx'

type NavBarProps = {
  leftChildren?: ReactNode
}

export default function NavBar({ children }: PropsWithChildren<NavBarProps>) {
  const user = useUserStore((state) => state.user)
  const isSuperUser = user?.roles.includes(Role.SuperUser)
  return (
    <nav className={`w-full flex flex-row justify-between px-4 md:px-8 py-3`}>
      <div className={`flex flex-row justify-start gap-4`}></div>
      <div className={`flex flex-row justify-end gap-4`}>
        {children}
        {isSuperUser && <NavButton to={'/admin/codes'}>admin</NavButton>}
        <SourceCodeLink />
      </div>
    </nav>
  )
}

function SourceCodeLink() {
  return (
    <a
      className={`size-6`}
      href="https://git.botris.dev/botris.social"
      target="_blank"
      title={'source code'}
    >
      <img style={{ color: 'red' }} src="/forgejo-logo-primary.svg" alt="Forgejo Logo" />
    </a>
  )
}