'use client'

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { IconUserFilled } from "@tabler/icons-react"

interface NavigationProps {
  isLoggedIn: boolean,
  username: string
}

export function NavigationBar ({ isLoggedIn, username}: NavigationProps) {
    return (
      <div className="flex flex-row p-4 gap-4 w-full fixed top-0 left-0 bg-slate-700 items-center justify-between">
        <div className="flex flex-row gap-4 items-center">
          <a href="/">Brawl Set</a>
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Cartes</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <NavigationMenuLink>Link</NavigationMenuLink>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Commandant·es</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul>
                    <li>Commandant·es 1</li>
                    <li>Commandant·es 2</li>
                    <li>Commandant·es 3</li>
                    <li>Commandant·es 4</li>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
        </div>
        <div className="flex flex-row gap-4">
          <Input placeholder="Rechercher des cartes" />
          { !isLoggedIn && 
            <>
              <a href="/account/signin"><Button>Connexion</Button></a>
              <Button disabled={true}>Inscription</Button>
            </>
          }
          {
            isLoggedIn &&
            <a href="/account/profile" className="flex flex-row items-center gap-2">
              <IconUserFilled color="gray" />
              <span className="text-gray-400">{username}</span>
            </a>
          }
        </div>
      </div>
    )
  }