'use client'

import { useLocale } from '../contexts/LocaleContext'
import LanguageSelector from './LanguageSelector'
import ThemeToggle from './ThemeToggle'

interface NavbarProps {
  className?: string
}

export function Navbar({ className = '' }: NavbarProps) {
  const { t } = useLocale()

  return (
    <nav className={`navbar navbar-expand-lg navbar-light bg-light border-bottom ${className}`}>
      <div className="container-fluid">
        <a className="navbar-brand fw-bold" href="/">
          🐱 CatLink
        </a>
        
        <div className="navbar-nav ms-auto d-flex flex-row align-items-center gap-3">
          <LanguageSelector />
          <ThemeToggle />
        </div>
      </div>
    </nav>
  )
}