/**
 * Header — top navigation bar with branding, user info, and connection status.
 */

import { useAuth } from '../../hooks/useAuth';
import { useGame } from '../../hooks/useGame';

export function Header() {
  const { handle, displayName, avatarUrl, logout } = useAuth();
  const { connected } = useGame();

  return (
    <header className="flex items-center justify-between border-b border-wood-700 bg-wood-900/90 px-4 py-3 backdrop-blur-sm md:px-5">
      {/* Branding */}
      <div className="flex min-w-0 items-center gap-2.5">
        <span className="select-none text-lg text-gold-500">♔</span>
        <h1 className="font-serif text-xl font-bold tracking-tight text-gold-400">
          Checkmate
        </h1>
        <div
          className={`ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full transition-colors ${connected ? 'bg-felt-500' : 'bg-red-500'}`}
          title={connected ? 'Connected' : 'Disconnected'}
        />
      </div>

      {/* User controls */}
      {handle && (
        <div className="flex min-w-0 items-center gap-3">
          <div className="flex min-w-0 items-center gap-2">
            {avatarUrl && (
              <img
                src={avatarUrl}
                alt={displayName ?? handle}
                className="h-7 w-7 shrink-0 rounded-full ring-1 ring-wood-600"
              />
            )}
            <span className="min-w-0 truncate text-sm text-wood-300">
              {displayName ?? handle}
            </span>
          </div>
          <button
            onClick={logout}
            className="flex min-h-[44px] -my-2.5 shrink-0 items-center rounded px-3 text-xs text-wood-500 transition-colors hover:bg-wood-700 hover:text-wood-200"
          >
            Sign out
          </button>
        </div>
      )}
    </header>
  );
}