import { useAuth } from "../auth/AuthContext";

export default function Header() {
  const { user, logout } = useAuth();

  return (
    <header
      className="px-6 py-3 flex items-center justify-between border-b"
      style={{
        backgroundColor: "var(--bg-header)",
        borderColor: "var(--border-primary)",
      }}
    >
      <h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>
        BellCloud™ - Console new 41 Nigga FUCK YOU 
      </h2>

      <div className="flex items-center gap-4">
        <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
          {user?.name}
          <span
            className="ml-2 px-2 py-0.5 text-xs rounded-full"
            style={{
              backgroundColor: "var(--badge-blue-bg)",
              color: "var(--badge-blue-text)",
            }}
          >
            {user?.role}
          </span>
        </span>
        <button
          onClick={logout}
          className="text-sm transition-colors"
          style={{ color: "var(--danger)" }}
          onMouseEnter={(e) => (e.target.style.color = "var(--danger-hover)")}
          onMouseLeave={(e) => (e.target.style.color = "var(--danger)")}
        >
          Sign out
        </button>
      </div>
    </header>
  );
}

/* my test string */