Scrum4Me/components/shared/nav-bar.tsx

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { logoutAction } from '@/actions/auth'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { AppIcon } from '@/components/shared/app-icon'
import { cn } from '@/lib/utils'

const ROLE_LABELS: Record<string, string> = {
  PRODUCT_OWNER: 'PO',
  SCRUM_MASTER: 'SM',
  DEVELOPER: 'Dev',
}

interface NavBarProps {
  isDemo: boolean
  roles: string[]
}

export function NavBar({ isDemo, roles }: NavBarProps) {
  const pathname = usePathname()

  const navLinks = [
    { href: '/dashboard', label: 'Producten' },
    { href: '/todos', label: "Todo's" },
  ]

  return (
    <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 gap-4 shrink-0">
      {/* Logo */}
      <Link href="/" className="flex items-center gap-2 font-medium text-foreground">
        <AppIcon size={24} />
        <span className="text-primary font-semibold">Scrum4Me</span>
        {isDemo && (
          <Badge className="bg-warning text-warning-foreground text-xs px-2 py-0">
            Demo
          </Badge>
        )}
      </Link>

      {/* Nav links */}
      <nav className="flex items-center gap-1 ml-2">
        {navLinks.map(link => (
          <Link
            key={link.href}
            href={link.href}
            className={cn(
              'px-3 py-1.5 rounded-md text-sm transition-colors',
              pathname.startsWith(link.href)
                ? 'bg-primary-container text-primary-container-foreground font-medium'
                : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
            )}
          >
            {link.label}
          </Link>
        ))}
      </nav>

      {/* Rechts: rollen + instellingen + uitloggen */}
      <div className="ml-auto flex items-center gap-2">
        {roles.length > 0 && (
          <span className="text-xs text-muted-foreground px-2">
            {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
          </span>
        )}
        <Link
          href="/settings"
          className={cn(
            'px-3 py-1.5 rounded-md text-sm transition-colors',
            pathname.startsWith('/settings')
              ? 'bg-primary-container text-primary-container-foreground font-medium'
              : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
          )}
        >
          Instellingen
        </Link>
        <form action={logoutAction}>
          <Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
            Uitloggen
          </Button>
        </form>
      </div>
    </header>
  )
}