"use client"

import { useRouter, usePathname } from "next/navigation"
import { useTranslations } from "next-intl"
import { LogOut } from "lucide-react"

import { Button } from "@/components/ui/button"
import { LocaleSwitcher } from "@/src/components/LocaleSwitcher"
import { logout } from "@/src/lib/api/auth-session"

export function AppTopbar() {
  const t = useTranslations("common")
  const router = useRouter()
  const pathname = usePathname()

  const locale = pathname?.split("/")[1] || "fr"

  function onLogout() {
    logout()
    router.replace(`/${locale}/login`)
  }

  return (
    <div className="sticky top-0 z-20 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="flex items-center justify-between px-6 py-3">
        <div className="text-sm font-medium">ACX</div>

        <div className="flex items-center gap-2">
          <LocaleSwitcher />
          <Button variant="outline" onClick={onLogout}>
            <LogOut className="h-4 w-4 mr-2" />
            {t("logout")}
          </Button>
        </div>
      </div>
    </div>
  )
}