"use client";

import React from 'react'
import { Button } from './ui/button'
import Link from 'next/link'
import { Home } from 'lucide-react'
import { usePathname } from 'next/navigation';

function NavbarLinks() {
  const pathname = usePathname()
  return (    
    <><Button asChild {...(pathname === '/' ? { variant: 'rounded' } : { variant: 'ghost' })}>
      <Link href="/">
        <Home className="size-4" />
        <span>Home</span>
      </Link>
    </Button>
    <Button asChild {...(pathname === '/lobby' ? { variant: 'rounded' } : { variant: 'ghost' })}>
        <Link href="/lobby">Lobbies</Link>
      </Button>
      <Button asChild {...(pathname === '/games' ? { variant: 'rounded' } : { variant: 'ghost' })}>
        <Link href="/games">Games</Link>
        </Button>
      </>
  )
}

export default NavbarLinks