'use client';
import Link from 'next/link';
import {usePathname} from 'next/navigation';
import {ThemeToggle} from './ThemeToggle';
import {LogoutButton} from './auth/LogoutButton';
export function ClockAppHeader() {
  const path=usePathname();
  return <header className="sticky top-0 z-40 border-b border-border bg-surface text-text">
    <div className="mx-auto max-w-6xl flex items-center gap-2 px-4 sm:px-6 lg:px-8 min-h-16">
      <Link href="/clock" className="min-h-11 min-w-0 flex-1 flex items-center gap-3" aria-label="Plant Clock home">
        <img src="/icons/plant-clock-192.png" width={40} height={40} alt="" className="rounded-xl shrink-0"/>
        <span className="min-w-0"><span className="block font-semibold text-base">Plant Clock</span><span className="block text-xs text-text-muted">Mega Plant · Employee scanning</span></span>
      </Link>
      <ThemeToggle/>
      {path!=='/clock/login'&&<LogoutButton iconOnly returnTo="/clock/login"/>}
    </div>
  </header>;
}