'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

const TABS = [
  { href: '/manage', label: 'Libraries' },
  { href: '/manage/tags', label: 'Tags' },
  { href: '/manage/users', label: 'Users' },
]

export default function ManageSubNav() {
  const pathname = usePathname()

  return (
    <nav className="flex items-center gap-1 mb-8 border-b pb-4" style={{ borderColor: 'var(--border)' }}>
      {TABS.map(({ href, label }) => {
        const active = pathname === href
        return (
          <Link
            key={href}
            href={href}
            className="text-sm px-3 py-1.5 rounded-lg transition-colors"
            style={{
              color: active ? 'var(--text-primary)' : 'var(--text-secondary)',
              backgroundColor: active ? 'var(--surface)' : 'transparent',
            }}
            onMouseEnter={(e) => {
              ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
              ;(e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'
            }}
            onMouseLeave={(e) => {
              ;(e.currentTarget as HTMLElement).style.backgroundColor = active ? 'var(--surface)' : 'transparent'
              ;(e.currentTarget as HTMLElement).style.color = active ? 'var(--text-primary)' : 'var(--text-secondary)'
            }}
          >
            {label}
          </Link>
        )
      })}
    </nav>
  )
}