'use client'

import { Menu } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'

export function MobileNavigationBar() {
  const { t } = useLanguage()

  return (
    <div className="sticky top-0 z-40 flex shrink-0 items-center border-b border-border/40 bg-background px-2 pt-[env(safe-area-inset-top)] md:hidden">
      <button
        type="button"
        aria-label={t('common.openNav')}
        title={t('common.openNav')}
        onClick={() => window.dispatchEvent(new CustomEvent('open-mobile-sidebar'))}
        className="flex h-11 w-11 items-center justify-center rounded-md text-foreground hover:bg-brand-accent/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-accent"
      >
        <Menu size={22} />
      </button>
    </div>
  )
}